Vue:Mac下Cli 3.x環境搭建與vue基本配置及部署

Vue環境搭建

一、安裝

1.安裝node

• brew安裝

brew install nodejs

安裝完成，查看node.js版本

node -v

• 設置nodejs模塊安裝目錄訪問權限

chmod -R 777 /usr/local/lib/node_modules/

2.安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝webpack

cnpm install webpack -g

4.安裝vue-cli 3.x

cnpm install -g @vue/cli

安裝完成，vue --version查看是否安裝

➜  ~ vue --version
3.7.0
➜  ~

二、創建應用

1.創建

vue create project-name

• 創建時的所有配置
  

2.完成

• 開發啓動

npm run serve

• 打包

npm run build

三、常見配置

1.關閉eslint語法檢測

• 如果是選擇配置保存到package.json文件的，可在文件中找到配置

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

關閉語法檢測，刪除掉"@vue/standard"配置即可

2.手動增加vue.config.js文件

vue cli 3.x後，vue.config.js是一個可選文件，默認沒有自動創建，可以手動在項目根目錄下創建，它會被@vue/cli-service 自動加載。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/home/webappdemo/' : '/',
  assetsDir: 'static',
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  }
}

四、項目部署

1.項目history路由模式在Nginx部署

開發完成後，在測試或生產環境部署。vue項目打包後，可用nginx部署到服務器

• 上傳項目

上傳項目(webappdemo)到服務器的任意位置(/home/webappdemo/)

• Nginx配置

vue項目的路由模式如果是history，需要nginx正確配置才能正常提供服務與刷新子界面不會變空白。配置示例如下：

server {
	listen      80 ;
	server_name  demo.example.com;
  
	# webapp conf
	location /webappdemo {
		alias /home/webappdemo/;
		index index.html;
		try_files $uri $uri/ /webappdemo/index.html;
	}
}

2.項目history路由模式在Tomcat部署

開發完，測試或生產環境部署。vue項目打包後，可用tomcat部署到服務器

• 上傳項目

上傳項目(webappdemo)到tomcat的webapps目錄下

• 修改sever.xml文件

修改conf下的server.xml文件，在 標籤下增加靜態資源路由配置

<Context path="/home/webappdemo" docBase="webappdemo" reloadable="false" />

ps: path保持與項目中vue.config.js中publicPath配置一致，docBase爲web應用和本地路徑

<Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
          <Context path="/home/webappdemo" docBase="webappdemo" reloadable="false" />
      </Host>

• 新增web.xml文件

vue項目的路由模式如果是history，需要服務器配置下才能正常提供服務與刷新子界面不會變空白。在tomcat下部署如下：

在項目(webappdemo)根目錄下創建文件夾WEB-INF,並在WEB-INF文件夾下創建web.xml文件，最終項目結構

.
├── WEB-INF
│   └── web.xml
├── favicon.ico
├── index.html
└── static
    ├── css
    │   ├── app.02c1b975.css
    │   ├── chunk-0d2d9a7c.fbdf4dec.css
    │   ├── chunk-1c7a44c4.55c0d3fd.css
    │   ├── chunk-2a642b84.a37cd815.css
    │   ├── chunk-732d40b2.e47e46f6.css
    │   ├── chunk-77e673e4.b3f885d7.css
    │   ├── chunk-787d872e.18979082.css
    │   ├── chunk-7aedd8fe.ba791828.css
    │   ├── chunk-8d332df8.c53d345f.css
    │   ├── chunk-c04d76a0.c7026f15.css
    │   ├── chunk-eb55fb2c.b3f885d7.css
    │   ├── chunk-elementUI.061a2b0a.css
    │   └── chunk-libs.3dfb7769.css
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── img
    │   ├── 404.a57b6f31.png
    │   ├── 404_cloud.0f4bc32b.png
    │   ├── img-user-profile.e8ed41d1.png
    │   └── logo.e4b5e3c7.png
    └── js
        ├── app.1c35bfcb.js
        ├── chunk-0d2d9a7c.b4720ba3.js
        ├── chunk-1c7a44c4.e12a85fb.js
        ├── chunk-2a642b84.617be68f.js
        ├── chunk-732d40b2.d9d4b8b1.js
        ├── chunk-77e673e4.344ea121.js
        ├── chunk-787d872e.4895e4cc.js
        ├── chunk-7aedd8fe.fcafa663.js
        ├── chunk-8d332df8.3bd396d8.js
        ├── chunk-c04d76a0.c18ffa88.js
        ├── chunk-eb55fb2c.351ee754.js
        ├── chunk-elementUI.3eefdd04.js
        └── chunk-libs.eba70c64.js

WEB-INF/web.xml文件配置內容(解決history路由去除#號的核心配置)：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0"
         metadata-complete="true">

  <display-name>webappdemo</display-name>
  <description>
     webappdemo route
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>  
</error-page>  
</web-app>

五、常見問題

1.打包後瀏覽器還能看到源碼 webpack://

• 問題

webpack://，展開能看到源碼

• 解決

vue.config.js配置 productionSourceMap:false

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/home/webappdemo/' : '/',
  assetsDir: 'static',
  productionSourceMap: false, // 打包後生產環境 source map
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  }
}

2.設置proxy解決開發跨域問題

• 問題

開發時，瀏覽器同源策略跨域問題

• 解決

vue.config.js配置 devServer

devServer: {
    proxy: {
      "/apicros": {
        target: "http://171.168.1.33:8088", // 跨域訪問域名或ip
        ws: true,
        changOrigin: true,
        secure: false,
          pathRewrite: {
          '^/apicros': '/'
        }
      }
    }
  }

設置 axios請求baseURL：http://localhost:8080/apicros