此处主要讨论的是大于等于3种环境的打包配置,如果只有两种的话NODE_ENV
会是development
、production
,这样的一般比较简单,下面将多种环境的配置,两种的可以参考类比。
首先配置package.json
{
...
"scripts": {
// 开发
"dev": "vue-cli-service serve",
// 测试
"build:dev": "vue-cli-service build --mode development",
// 生产
"build:pro": "vue-cli-service build --mode production",
// 其它2
"build:feat": "vue-cli-service build --mode feat",
// 其它2
"build:fix": "vue-cli-service build --mode fix"
},
...
}
默认情况下,一个 Vue CLI 项目有三个模式:
development
模式用于vue-cli-service serve
production
模式用于vue-cli-service build
和vue-cli-service test:e2e
test
模式用于vue-cli-service test:unit
--mode
选项参数为命令行覆写默认的模式。
其次新建.env开头的文件
在项目根目录创建
# 文件名 .env.feat
NODE_ENV = 'feat'
# 文件名 .env.fix
NODE_ENV = 'fix'
#
为注释,文件名的后缀要和package.json
中配置mode
的一样,开头统一为.env
。这样配置之后可以通过process.env.NODE_ENV
来判断不同环境下配置
或者也可以通过其他变量来做判断
# 文件名 .env.fix
NODE_ENV = 'production'
VUE_APP_BASE = 'fix'
可以通过process.env.VUE_APP_BASE
来获取变量做相应的配置,NODE_ENV
也可以是development
,注意:变量必须是VUE_APP_
开头才可以;BASE_URL
变量 会和 vue.config.js
中的 publicPath
选项相符,即你的应用会部署到的基础路径。
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
最后就是根据环境变量和模式更改配置
不同人不同项目有不同的需求更改配置,主要分为两种,一种是打包的配置,即根据不同环境进行不同的打包配置,修改vue.config.js
;一种是项目配置,一般是修改不同的请求地址。项目内和vue.config.js
中都可以获取 process.env
下的对象属性NODE_ENV
或者VUE_APP_
开头来做判断,进行个性化处理。