env的使用

env文件可设置环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

案例

• 若想使客户端侧也能使用以下变量，则可以使用VUE_APP开头的变量

.env文件

productionSourceMap=false # 开发环境下 sourceMap false，加速编译
VUE_APP_TITLE='this is a title'  

.env.testing文件

productionSourceMap=true # 测试环境下 sourceMap true，因上服务器的是编译后的代码，需要sourcemap
VUE_APP_TITLE='this is a title'  

package.json文件

{
	"scripts":{
    	"development":"vue-cli-service build --mode testing", # 正确的写法
        "testing":"npm run development",
        # 以下这种做法是错误的。只有vue-cli-service命令会识别 --mode 参数
        "wrongTest":"npm run development --mode testing" 
        
    }
}

小技巧

对于.env中的boolean属性，vue.config.js 用 process.env.productionSourceMap 直接读取的话是string类型.可通过JSON.parse()做转换

vue.config.js

console.log(JSON.parse(process.env.productionSourceMap))  // 此时输出的才是boolean

快速调试技巧

可以借用fs.writeFileSync把所有的process.env全部记录在文件中，可直接在文件中搜索所需变量以做验证 vue.config.js

const fs = require('fs')
fs.writeFileSync('record.txt',JSON.stringify(process.env))

踩坑记录：

1. 写完.env.testing记得补上.env，不然vue-cli-service serve 命令会报错。
2. package.json 文件中的wrongTest示例