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: 该字段不宜出现在共有仓库

 继续浏览关于 前端vuejs 的文章

 本文最后更新于:2020/08/12 15:54:15,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 学习笔记 > Vue环境变量和模式