Vue-cli3 .env 配置全局自定义变量 开发 / 生产环境

由于工程中请求的 apiServer 可能有多个地址，所以不能简单设置 baseUrl，必须设置多个全局变量

1.在 vue.config.js 的同级新建文件

新建文件.png

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

所有环境 .env
开发环境 .env.development
生产环境 .env.production

以上三个命名不能变动，除此之外，可以另外自定义加上 .env.test 文件，也就是测试环境，或者 .env.beta，也就是公测，等等…
则还需要在 package.json 中做对应设置

测试环境 .env.test
公测环境 .env.beta

如果 .env.[mode].local 文件没有被 Git 忽略，并且出现在 Git 仓库中，那么这通常意味着它没有被正确地添加到 .gitignore 文件中。为了确保这个文件不会被提交到 Git 仓库，你需要将其添加到 .gitignore 中

根目录下的 .gitignore 文件

.env.*.local

2.编写文件，设置变量

注意，全局变量仅除 NODE_ENV 和 BASE_URL 这两个保留变量外，其余自定义变量都需使用 VUE_APP_ 开头

NODE_ENV = 'development'
BASE_URL = ''

VUE_APP_URL = 'http://development.api.com'
VUE_APP_STRING = '哈哈'
VUE_APP_NUMBER = 123

3.在工程中使用

使用时  process.env.变量名  即可
console.log(process.env.VUE_APP_URL ) // http://development.api.com

开发环境：创建 .env.development 文件，同时配置 .env.development 和 .env 同时存在，系统默认访问 .env.development

生产环境：创建 .env.production 文件；配置好了 .env.production 后使用 build，系统默认访问 .env.production 里面的全局变量

注意：

1.改变一次全局变量后。就需要重新 npm run serve 启动一次，否则无法生效
2.文件里使用 # 注释

注意.png

4.环境变量分发

开发环境.png

测试环境.png

正式环境.png

vue.config.js 文件修改

module.exports = {
    outputDir: process.env.outputDir,
    // 如果使用代理，则设置 target 地址，如果没有使用代理，设置 axios 的 baseUrl
    proxy: {
        '/api': {
            /* 目标代理服务器地址 */
            target: process.env.VUE_APP_URL,
            /* WebSocket */
            ws: true,
            /* 允许跨域 */
            changeOrigin: true,
            /* 路径重写 */
            pathRewrite: {
                '^/api' : ''
            }
        }
    },
};

package.json 文件修改

"scripts": {
    // "serve": "vue-cli-service serve",
    // "build": "vue-cli-service build",

    "serve": "vue-cli-service serve --mode development",
    "serve:test": "vue-cli-service serve --mode test",
    "serve:production": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:production": "vue-cli-service build --mode production",
    "build:tp": "vue-cli-service build --mode test && vue-cli-service build --mode production"
},