配置环境变量
- 在根目录添加.env文件,通用配置。
- 在根目录添加.env.local 文件,通用配置,与.env的区别是只会在本地,该文件不会被git提交。
- 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
- 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git提交。
在文件中,使用key=value的方式设置变量
如:
BAE_URL='https://www.edik.cn'
VUE_APP_SECRET='secret'
环境变量的使用
1. 在项目中使用
即在src目录下使用,变量名必须以 VUE_APP_ 开头
在main.js中直接输出一下命令 查看效果
前提:配置好对应的变量
console.log(process.env.BAE_URL)
console.log(process.env.VUE_APP_SECRET)
2.在webpack配置中使用
这个没有限制,可以直接通过process.env.XXX来使用
3.在index.html模板中使用
我暂时没用到过使用场景,请自己摸索
<%= VAR %> 用于非转换插值 例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
<%- VAR %> 用于HTML转义插值
<% expression %> 用于JavaScript控制流
默认的三种模式
模式 | 对应npm命令 | 对应文件名称 |
---|---|---|
development | server | .env.development |
production | build | .env.production |
test | test | .env.test |
注意:
process.env.NODE_ENV
为默认变量,会自动设置为上边对应的模式名称(test的我没试过,请自行校验)
自定义模式
现实总是残酷的,默认的三种模式也许并不能满足我们的所有使用场景,使用自定义模式可以很好地解决这个问题。
我们开始创建一个 alpha 模式
修改package.json
添加一行命令"alpha": "vue-cli-service build --mode alpha"
实际效果
{
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve", //本地开发运行,会把process.env.NODE_ENV设置为'development'
"build": "vue-cli-service build", //默认打包模式,会把process.env.NODE_ENV设置为'production'
"alpha": "vue-cli-service build --mode alpha", //自定义打包模式,会把process.env.NODE_ENV设置为文件内定义的名称
"lint": "vue-cli-service lint"
},
"dependencies": {
}
}
添加.env.alpha文件
在项目根路径创建.env.alpha
文件,内容为
NODE_ENV = 'alpha'
测试
创建下边js文件,在页面中引用
let baseUrl: string = ""; //这里是一个默认的url,可以没有
switch (process.env.NODE_ENV) {
case 'development':
baseUrl = "http://localhost:8888/" //这里是本地的请求url
break
case 'alpha': // 注意这里的名字要和设置的模式名字对应起来
baseUrl = "http://alpha.edik.cn/" //这里是测试环境中的url
break
case 'production':
baseUrl = "https://www.edik.cn/" //生产环境url
break
}
export default baseUrl;