Vue环境变量和模式

Vue环境变量和模式

Vue环境变量和模式

我最开始使用vue的判断环境的方法是

let BASE_URL = process.env.NODE_ENV == "development" ? "http:/localhost" : "xxx"

在这种情况下，需要先判断它的编译环境，进而根据环境适用对应的值。如果只有一个地方的变量跟环境有关，情况还好。但是若有多个，则需要复制多个判断或者封装成一个方法。但也只能使用于两个环境，如果存在多个环境，诸如开发，测试，预发布，正式等环境，这个方法就捉襟见肘了。所以，我们需要设置Vue环境变量和模式，好像webpack也可以实现？（好吧，这不是重点）

实现方式

vue允许你在项目根目录下添加.env.[mode]的文件来指定环境变量。

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

比如我，我添加了.env.local,.env.development,.env.test,.env.production等文件，.env.local文件内容如下。

.env.local

VUE_APP_BUILD_MODE = 'development'
VUE_APP_BASE_URL = 'http://172.16.6.132:8002/threemiju/'

对应package.json的script如下:

"scripts": {
    "serve": "vue-cli-service serve --mode",
    "serve:test": "vue-cli-service serve --mode test",
    "build:test": "vue-cli-service build --mode test",
    "build:production": "vue-cli-service build --mode production",
    "deploy:test": "git push && git push gitlab dev && vue-cli-service build --mode test"
  },

请注意，此处有一个坑。当你使用yarn run build:test的时候，你会发现，假如你使用了异步组件，却会神奇的发现，它并没有把把代码切割，只编译成了一个app.js文件，这是由于你使用了--mode test, 导致它认为你并不是prodution环境。所以，你需要对.env.test做以下修改

  • .env.test
NODE_ENV = 'production'
VUE_APP_BUILD_MODE = 'test'
VUE_APP_BASE_URL = 'https://m.gileey.cn/threemiju/'

主动设置NODE_ENV即可。

环境变量的使用场景

  1. BASE_URL
export const baseURL = process.env.VUE_APP_BASE_URL;
  1. BUILD_MODE

在显示版本号时同时显示编译环境

<span :title="mode">{{ version }}</span>

data(){
return {mode: process.env.VUE_APP_BUILD_MODE}
}

本地变量(*.local)的一些应用场景

  1. BASE_URL: 在不同的开发机器下，请求不同内网地址
  2. APP_SECRET: 该字段不宜出现在共有仓库

版权声明: （https://www.thinkmoon.cn/post/894）
本文首发于指尖魔法屋-Vue环境变量和模式
转载或引用必须申明原指尖魔法屋来源及源地址！