vue cli3 环境变量 模式

vue cli3中使用环境变量和模式

理解模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

也就是说在不做任何设置的情况下:
a、本地运行项目 npm run dev 使用的是development模式，process.env.NODE_ENV="development"
b、打包项目 npm run build 使用的是production模式，process.env.NODE_ENV="production"

如果有其他需求，需自行配置环境变量，则使用以下2步创建并使用
比如：在生产环境中需要使用两个不同的接口地址，并且使用不同的打包名称等

1、创建

  • 必须在项目根目录中创建，文件格式如下：
.env 
.env.local
.env.*
.env.*.local

注：
a、代表模式名，英文小写
b、.local后缀的文件会载入相应模式，但会被git忽略
c、.env 文件在所有的环境中被载入 .env.[模式名] 在指定的模式中被载入
d、环境优先级：.env. > .env

  • 一个环境文件只包含环境变量的“键=值”对
    如：
# 环境
NODE_ENV = 'production'
# 模块名
VUE_APP_NAME = 'release'
# 打包文件名
VUE_APP_DIR_NAME = 'test'

注：
a、NODE_ENV 变量可以覆盖默认值
b、其他变量名VUE_APP_ 前缀开头（例如上述模块名或者打包文件名）

2、使用

(1) 构建命令中使用，package.json文件
通过传递 --mode 选项参数为命令行覆写默认的模式

"scripts": {
  "dev": "vue-cli-service serve",
  "build": "vue-cli-service build --mode build",
  "release": "vue-cli-service build --mode release"
},

注：
–mode XXX名字一定要跟 .env.xxx名字对应起来

(2) 在代码中使用

let baseUrl=""
if(process.env.NODE_ENV === "production"){ //生产环境
  if (process.env.VUE_APP_NAME === 'release') {
    baseUrl = "正式地址1";
  }else if(process.env.VUE_APP_NAME === 'build'){
    baseUrl = "正式地址2";
  }
}else{ //开发环境
  baseUrl="开发地址"
}
export { baseUrl }

在vue.config.js中配置

// 输出文件目录
outputDir:process.env.VUE_APP_DIR_NAME,
posted @ 2020-10-27 10:58  smile_or  阅读(1706)  评论(0)  编辑  收藏  举报