我们先来看第一种怎么配置（有webpack的config目录）vue-cli版本是2.0左右的就会有webpack的config目录
vue-cli版本是3.0以上的就会有vue.config.js没有config目录
目录：
配置：这里一共展示dev环境和生产环境，其他环境在config目录类似添加
需要下载cross-env
npm install --save-dev cross-env
警告！确保在安装软件包时可以正确拼写，以免错误安装恶意软件
注意：cross-env的版本6仅支持Node.js 8和更高版本，才能在Node.js 7或更低版本的安装版本5上使用npm
install --save-dev cross-env@5
使用（举例）
{"scripts": {"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"}}
第一步： config目录=》index.js
dev: {assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: { [process.env.API_ROOT]: { // target: `http://xxx:8888`, // 当设置process.env.API_ROOT之后。target就没用了他会自动识别你登录的是dev还是prod环境，从而自己切换域名changeOrigin: true,pathRewrite: {['^' + process.env.API_ROOT]: ''}}},
第二步：config目录=》dev.env.js
'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',ENV_CONFIG: '"dev"',API_ROOT:'http://xxx.con'//这里是dev环境的域名配置})
第三步：config目录=》dev.env.js
'use strict'module.exports = {NODE_ENV: '"production"',ENV_CONFIG: '"prod"',API_ROOT:'' // 生产环境}
第四步build目录=》webpack.prod.conf.js
//const env = require('../config/prod.env') 注释这一行改为下面一行const env = require('../config/' + process.env.env_config + '.env')
第五步在你封装axios时，需要进行配置
// 获取当前你使用到的所有环境，通过对env判断拿到对应的API_ROOTconst proEnv = require("../../config/prod.env");const devEnv = require("../../config/dev.env");const env = process.env.NODE_ENV;let target = "";if (env === "production") {target = proEnv.API_ROOT;} else {target = devEnv.API_ROOT;}// 创建axios实例const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: target,// baseURL: '',// 超时timeout: 60000})
第六步：打包？？ package.json
在dev下面添加：
"build:dev": "cross-env NODE_ENV=development env_config=dev node build/build.js","build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
注意NODE_ENV以及env_config配置的时候一定要对应清楚，名字不能马虎
打包自由切换
打包生产：npm run build:prod
打包dev: npm run build:dev
-第二种情况 （ 有vue.config.js）这里vue.config如果没有也是可以自己创建的
第一步，创建需要的环境文件，这里有五种环境
内容：（每个文件内容是相同的只是env与VUE_APP_BASE_API设置的不一样）
# 页面标题VUE_APP_TITLE = xxx# 生产环境配置ENV = 'production'# 案件管理系统/生产环境VUE_APP_BASE_API = ''
这里其他就不介绍了与上面是雷同的
第二步vue.config.js
devServer: {host: '0.0.0.0',port: port,open: true,proxy: {[process.env.VUE_APP_BASE_API]: {//target: `http://xxx:8080`, // 同样是没有影响的changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}},},
第三步
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API, // 直接获取环境地址自由切换// 超时timeout: 60000})
第四步
"scripts": {"dev": "vue-cli-service serve","build:dev": "vue-cli-service build --mode dev","build:prev": "vue-cli-service build --mode prev","build:prod": "vue-cli-service build","build:test": "vue-cli-service build --mode test","preview": "node build/index.js --preview","lint": "eslint --ext .js,.vue src"},
打包自由切换:其他类似
打包生产：npm run build:prod
打包dev: npm run build:dev
打包test: npm run build:test
