vue-cli 3.X 配置不同运行/打包环境

由于项目需要在各种环境的打包切换过程中,由于缺少环境常量需要手动修改相关请求Api域名等配置达到预期目的。
进而导致如果项目存在多个环境时，多环境没办法自动化构建。比较麻烦,故此增加此配置方法,操作方法如下:

提示:

npm run serve时会把 process.env.NODE_ENV 设置为 ‘development’；
npm run build 时会把 process.env.NODE_ENV 设置为 ‘production’；

第一步. 创建 .env 文件

在根目录创建 .env 文件, 内容如下

VUE_APP_PROJ_NAME = '默认地址'
VUE_APP_BASE_URL = 'http://xx.xx.xx.88'

vue-cli中规定

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
代码中可以通过process.env.VUE_APP_SECRET这样访问。

第二步.创建.env.test文件

VUE_APP_PROJ_NAME = '测试地址'
VUE_APP_BASE_URL = 'http://xx.xx.xx.99'

第三步.创建.env.pro文件

VUE_APP_PROJ_NAME = '生产地址'
VUE_APP_BASE_URL = 'http://xx.xx.xx.66'

第四步.修改 package.json 文件

"scripts": {
     "serve": "vue-cli-service serve", //本地运行默认取 .env 文件内容
"serve:test": "vue-cli-service serve --mode test",   //运行测试地址取.env.test 文件内容
"serve:pro": "vue-cli-service serve --mode pro",  //运行生产地址取.env.pro 文件内容
"build": "vue-cli-service build", //本地打包默认取 .env 文件内容
"build:test": "vue-cli-service build --mode test", //打包生产地址取.env.pro 文件内容
"build:pro": "vue-cli-service build --mode pro" //打包生产地址取.env.pro 文件内容
}

/注意，这里 “--mode 名字“ 要和步骤2中文件名 “.env.名字” 名字保持一致

第五步.在vue.config.js 加入如下代码:

devServer: {
    port: '8123', //代理端口
    open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
    proxy: {
         '/api': {
                target: process.env.VUE_APP_HTTP_URL, // 配置里接口地址
                changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
                        '^/api': '/'
                }
}
        }
  }

第六步.在http 的封装的 axios 请求中, 加入如下代码:

// 配置里本地请求虚拟代理地址与 proxy 名称相同即 ==> /api/
// 生产环境则是接口实际地址 http://xx.xx.xx.xx , 如有跨域需要服务器做一下接口转发即可
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/api/' : process.env.VUE_APP_HTTP_URL;

第七步.运行 / 打包不通环境

npm run serve // 默认地址 .env
npm run build // 默认地址 .env

npm run serve:test // 测试地址 .env.test
npm run build :test // 测试地址

npm run serve:pro // 生产地址 .env.pro
npm run build :test // 测试地址

最后编辑于：2020.05.11 11:23:51

vue-cli 3.X 配置不同 运行/打包 环境

vue-cli 3.X 配置不同运行/打包环境