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 // 测试地址