1、在項目的的根目錄下新建vue.config.js
2、新建一個config包，里面存放不同的環境文件，里面包含：pro.env.js(生產環境配置)，uat.env.js(測試環境配置),dev.env.js(本地環境)
文件目錄如下：
2-1、生產環境內容
// 生產環境
module.exports = {
NODE_ENV: 'production',
hosturl:''
}
2-2、測試環境內容
const hosturl= '';
// 測試環境
module.exports = {
NODE_ENV: 'test',
hosturl:hosturl
}
2-3、本地環境內容
// 本地環境
module.exports = {
NODE_ENV: 'development',
hosturl:''
}
3，vue.config.js 內容配置
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path');
const devProxy = ['/pc','/weixin','android',...]; // 代理
var proEnv = require('./config/pro.env'); // 生產環境
var uatEnv = require('./config/uat.env'); // 測試環境
var devEnv = require('./config/dev.env'); // 本地環境
const env = process.env.NODE_ENV;
let target = '';
// 默認是本地環境
if(env==='production'){ // 生產環境
target = proEnv.hosturl;
}else if(env==='test'){ // 測試環境
target = uatEnv.hosturl;
}else{ // 本地環境
target = devEnv.hosturl;
}
// 生成代理配置對象
let proxyObj = {};
devProxy.forEach((value, index) => {
proxyObj[value] = {
target: target,
changeOrigin: true,
pathRewrite: {
[`^${value}`]: value
}
};
});
module.exports = {
baseUrl: '/',
outputDir: 'dist',
devServer: {
// open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
disableHostCheck: true,
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: proxyObj, // string | Object
before: app => {}
}
};
4、反向代理
有時我們需要進行配置反向代理，一定要加上“disableHostCheck: true”這句話
5、命令配置，在package.json文件里配置
"scripts": {
"dev": "vue-cli-service serve --open",
"prod":"vue-cli-service build --mode=production",
"uat": "vue-cli-service build --mode=test"
},
5-1 serve 和build 的區別
serve 是服務命令，build是用于打包用的，比如 npm run dev ,可以在瀏覽器上直接瀏覽頁面，prod和uat 這兩個就只能在本地打好包，然后放到服務器上，訪問網址才能看到。
如何要在瀏覽器上看到不同的環境就用如下命令
"scripts": {
"dev": "vue-cli-service serve --open",
"prod":"vue-cli-service serve --mode=production",
"uat": "vue-cli-service serve --mode=test"
},
大家可以根據自己的需求來配置。
這時，代理,不同環境走不同的target就配置好了，下面在多說些注意事項
6，cli-service 服務命令，默認情況下必須有一個development
--open open browser on server start
--mode specify env mode (default: development)
--host specify host (default: 0.0.0.0)
--port specify port (default: 8080)
--https use https (default: false)
7、
NODE_ENV - 環境的運行模式有"development", "production" "test"
hosturl- target（如：https:www.baidu.com）.
8.官方解釋
8-1，環境變量和模式
您可以通過將以下文件放在項目根目錄中來指定env變量：
.env ＃在所有情況下加載
.env.local ＃在所有情況下加載，通過GIT中忽略
.env.[model] ＃僅裝入指定的模式
.env.[model].local ＃僅裝入指定的模式，通過GIT中忽略
env文件只包含環境變量的鍵=值對：
FOO=bar
VUE_APP_SECRET=secret
加載的變量將可用于所有vue-cli-service命令，插件和依賴項。
模式
模式是Vue CLI項目中的一個重要概念。默認情況下，Vue CLI項目中有三種模式：
development 用于 vue-cli-service serve
production被vue-cli-service build和使用vue-cli-service test:e2e
test 用于 vue-cli-service test:unit
請注意，模式不同NODE_ENV，因為模式可以包含多個環境變量。也就是說，NODE_ENV默認情況下每個模式都設置為相同的值 - 例如，NODE_ENV將設置為"development"開發模式。
您可以通過后綴.env文件來設置僅適用于特定模式的環境變量。例如，如果創建.env.development在項目根目錄中命名的文件，則在該文件中聲明的變量將僅在開發模式下加載。
您可以通過傳遞--mode選項標志來覆蓋用于命令的默認模式。例如，如果要在build命令中使用開發變量，請將其添加到package.json腳本中：
"dev-build": "vue-cli-service build --mode development",
示例：分段模式
假設我們有一個包含以下.env文件的應用：
VUE_APP_TITLE=My App
以下.env.staging文件：
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
vue-cli-service build建立一個生產應用程序，裝載.env，.env.production以及.env.production.local如果它們存在;
vue-cli-service build --mode staging建立在分段模式中，使用生產應用.env，.env.staging以及.env.staging.local如果它們存在。
在這兩種情況下，應用程序都是作為生產應用程序構建的，因為NODE_ENV它在暫存版本中process.env.VUE_APP_TITLE會被不同的值覆蓋。
