vite添加环境变量import.meta.env方式

vite添加环境变量import.meta.env

在不同文件里配置不同的环境变量，能让项目维护起来轻松不少，也更方便区分开发、测试、生产等场景。这里就聊聊Vite里环境变量和模式具体怎么配，官方文档其实写得挺清楚，但真正上手时可能会遇到点小坑——比如我自己就踩过一回，索性把步骤和注意事项都捋一遍，供大家参考。

package.json里面的scripts修改

首先，在scripts里增加多个环境模式，比如下面这样：

"scripts": {
    "dev": "vite serve --mode development",
    "test": "vite serve --mode test",
    "ppe": "vite serve --mode ppe",
    "prod": "vite serve --mode production",
    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "build:ppe": "vue-tsc --noEmit && vite build --mode ppe",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "serve": "vite preview"
}

在项目目录下增加环境变量的文件

接着在项目根目录创建对应的环境变量文件，比如：

• .env.development

# 开发环境变量
VITE_APP_TITLE=记账簿development

• .env.test

# 质控环境变量
VITE_APP_TITLE=记账簿test

• .env.production

# 生产环境变量
VITE_APP_TITLE=记账簿

在vue里面使用

在组件或脚本里直接通过import.meta.env访问就行了，比如：

console.log('VITE_APP_TITLE:' + import.meta.env.VITE_APP_TITLE);

这里有个容易忽略的细节：如果想把环境变量放在字符串模板里直接使用，会出问题。比如在模板字符串中写`${import.meta.env.VITE_APP_TITLE}`，打包时大概率会报错。正确的做法是用import.meta\u200b.env.VITE_APP_TITLE这种写法（加一个零宽空格断句），或者干脆先赋值给一个变量再拼接。官方文档其实提过这个限制，但实际用的时候很容易忘，下面贴一下当时的报错信息，方便后面排查：

D:\study\gitee\study\vite2vue3study>npm run build:prod

> vite2vue3study@0.0.0 build:prod D:\study\gitee\study\vite2vue3study

> vue-tsc --noEmit && vite build --mode production

vite v2.5.5 building for production...

✓ 16 modules transformed.

[rollup-plugin-dynamic-import-variables] Unexpected token (12:18)

file: D:/study/gitee/study/vite2vue3study/src/views/About.vue?vue&type=script&lang.ts:12:18

error during build:

SyntaxError: Unexpected token (12:18)

at Parser.pp$4.raise (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16958:13)

at Parser.pp.unexpected (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:14466:8)

at Parser.pp.expect (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:14460:26)

at Parser.pp$3.parseExprList (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16827:12)

at Parser.pp$3.parseSubscript (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16192:25)

at Parser.pp$3.parseSubscripts (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16149:24)

at Parser.pp$3.parseExprSubscripts (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16133:21)

at Parser.pp$3.parseMaybeUnary (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16096:17)

at Parser.pp$3.parseExprOps (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16029:19)

at Parser.pp$3.parseMaybeConditional (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16012:19)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! vite2vue3study@0.0.0 build:prod: `vue-tsc --noEmit && vite build --mode production`

npm ERR! Exit status 1

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-09-17T08_00_39_340Z-debug.log

总结

以上就是Vite环境变量配置的完整流程，从package.json的脚本修改到环境变量文件的创建，再到实际使用时的注意事项。关键点在于：import.meta.env不能在模板字符串中直接使用，否则打包会报错，需要提前赋给一个变量。另外，环境变量名必须以VITE_开头，否则Vite不会暴露给客户端。希望这些实操细节能帮到有同样需求的朋友。