vue-cli3实现分环境打包

正式项目开发的时候环境不止一个所以自带脚本就不满足了，这里记录一下环境配置

项目根目录下新建.env.devBuild、.env.development、.env.production

.env.devBuild

NODE_ENV = 'production'
VUE_APP_API_URL_WEB='测试环境地址'

.env.development

NODE_ENV = 'development'
VUE_APP_API_URL_WEB='测试环境地址

.env.production

NODE_ENV = 'production'
VUE_APP_API_URL_WEB='正式环境地址'

接口请求配置新建env.js，然后配置axios.defaults.baseURL就好了

env.js

let baseUrl = ''; //这里是一个默认的url，可以没有
// eslint-disable-next-line no-undef
switch (process.env.NODE_ENV) {
  case 'development':
    // eslint-disable-next-line no-undef
    baseUrl = '/'; //这里是本地测试的url,这里我是配了proxy
    break;
  case 'devBuild':
    // eslint-disable-next-line no-undef
    baseUrl = process.env.VUE_APP_API_URL_WEB; //这里是打包到测试环境中的url
    break;
  case 'production':
    // eslint-disable-next-line no-undef
    baseUrl = process.env.VUE_APP_API_URL_WEB; //是打包到生产环境url
    break;
}

export default baseUrl;

部分axios.js代码

import baseUrl from './env';
axios.defaults.baseURL = baseUrl;
export default axios;

package.json添加代码

 "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "devBuild": "vue-cli-service build --mode devBuild"
  },

打包到测试环境使用命令行 npm run devBuild,打包到正式环境就还是 npm run build

项目目录

注意事项：

.env.devBuild文件.env.后面的名字可以自己定义，不过要和package.json文件中的vue-cli-service build --mode接的关键字一致。NODE_ENV = 'production'代表打包到生产环境，NODE_ENV = 'development'代表调试环境不要用于打包