vue4多环境变量配置

 

通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境

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

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

配置

在项目根目录中新建.env, .env.production, .env.analyz 等文件 env的后缀为配备的变量名称

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

• .env

serve 默认的本地开发环境配置

NODE_ENV = "development"

BASE_URL = "./"

VUE_APP_PUBLIC_PATH = "./"

VUE_APP_API = "https://test.staven630.com/api"复制代码

.env.development：

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

比如执行npm run serve命令，会自动加载.env.development文件

启动项目：npm run serve

可见NODE_ENV被改为了development，覆盖掉了.env中的全局属性

.env中的全局属性NODE_ENV、VUE_APP_URL被覆盖，

.env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留

 

• .env.production

build 默认的环境配置（正式服务器）

NODE_ENV = "production"

BASE_URL = "https://prod.staven630.com/"

VUE_APP_PUBLIC_PATH = "https://prod.oss.com/staven-blog"

VUE_APP_API = "https://prod.staven630.com/api"

  

ACCESS_KEY_ID = "xxxxxxxxxxxxx"

ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"

REGION = "oss-cn-hangzhou"

BUCKET = "staven-prod"

PREFIX = "staven-blog"复制代码

• .env.crm

自定义 build 环境配置（预发服务器）

NODE_ENV = "production"

BASE_URL = "https://crm.staven630.com/"

VUE_APP_PUBLIC_PATH = "https://crm.oss.com/staven-blog"

VUE_APP_API = "https://crm.staven630.com/api"

  

ACCESS_KEY_ID = "xxxxxxxxxxxxx"

ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"

REGION = "oss-cn-hangzhou"

BUCKET = "staven-crm"

PREFIX = "staven-blog"

  

IS_ANALYZE = true;复制代码

修改 package.json

"scripts": {

"build": "vue-cli-service build",

"crm": "vue-cli-service build --mode crm"

}复制代码

使用环境变量

 

通过不同命令行切换不同环境api等信息，

例如： npm run dev 调用本地环境api

           npm run test 调用测试环境api

           npm run build 调用线上环境api

（1）先在package.json文件中添加：

"test": "vue-cli-service build --mode test" 

（2）在项目目录下建立 .env文件和.env.test文件

.env文件

1. NODE_ENV = 'production'

2. VUE_APP_FLAG = 'pro'

.env.test文件（outputDir：打包时的输出目录名字，若需默认输出到dist目录，则可不写该变量）

1. NODE_ENV = 'production'

2. VUE_APP_FLAG = 'test'

3. outputDir = test

在vue.config.js文件中添加：

outputDir: process.env.outputDir, 

（3）在main.js文件中配置api变量

if (process.env.NODE_ENV === 'production') {
    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
        //production 生产环境
        axios.defaults.baseURL = 'http://api.xinggeyun.com';
 
    } else {
        //test 测试环境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';
 
    }
} else {
    //dev 开发环境
    axios.defaults.baseURL = 'http://192.168.0.152:8102';
}

npm run test后，即可在目录文件中看到test文件

在html中

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

环境加载属性

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用；

在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 "secret"。

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

提示

你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。这可以用于版本信息:

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

只在本地有效的变量
有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。
https://cli.vuejs.org/zh/guide/mode-and-env.html