背景
在项目部署时,我们需要在测试环境和生产环境使用不同的变量。
vue-cli提供了vue-cli-service build
打包命令,然而vue-cli-service build
默认的环境变量值则为production
。那我们通过npm run build
打包构建,想要实现不同环境使用不同变量,暂时不能实现。
介绍
vue-cli生成项目时,在package.json
中会设置:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
vue-cli-service serve
命令会启动一个开发服务器,默认指定的环境模式为development。vue-cli-service build
会在 dist/ 目录产生一个可用于生产环境的包,带有 JS/CSS/HTML 的压缩,和为更好的缓存而做的自动的vendor chunk splitting。环境变量和模式 在项目的根目录下我们可以创建不同模式的文件:
.env# 在所有的环境中被载入
.env.local# 在所有的环境中被载入,但会被 git 忽略
.env.[mode]# 只在指定的模式中被载入
.env.[mode].local# 只在指定的模式中被载入,但会被 git 忽略
【vue-cli-service build 不同环境配置】一般来说,我们会存在
本地环境、测试环境、线上环境
,那我们就需要创建三个模式文件。.env.development
开发环境模式
// 环境变量
NODE_ENV=development
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'development'
.env.test
测试环境模式
// 环境变量(这里的环境变量是跟打包有关的,production则会进行压缩代码等,真正跟每个环境有关的变量是下面以VUE_APP开头的变量)
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'test'
.env.production
线上环境模式
// 环境变量
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'production'
配置不同模式 部署时,构建打包执行
npm run build
,则会执行vue-cli-service build
,默认模式为production
,对应.env.production文件
,取此文件中的环境变量。想要配置测试环境,需要在scripts下增加脚本:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-test": "vue-cli-service build --mode test"
}
测试环境打包构建时,执行
npm run build-test
即可。index.html使用环境变量 在
index.html
中可通过
的方式获取不同模式下配置的环境变量。