vite添加環(huán)境變量import.meta.env

在不同的文件里面配置不同的環(huán)境變量，可以讓我們的配置更加容易維護(hù)和使用，這里我們說下vite配置環(huán)境變量和模式是怎么配置的。

Vite 在一個特殊的 import.meta.env 對象上暴露環(huán)境變量，官網(wǎng)上的東西咱這里就不抄了，O(∩_∩)O哈哈~

我們這里直接說怎么做的，畢竟官網(wǎng)上沒有實(shí)際使用的例子，在下在實(shí)際使用的時(shí)候還遇到點(diǎn)問題，當(dāng)然也可以說是自己沒用對吧。

package.json里面的scripts修改

增加多個環(huán)境模式，如：

"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"
  }

在項(xiàng)目目錄下增加環(huán)境變量的文件

如：

• .env.development

# 開發(fā)環(huán)境變量
VITE_APP_TITLE=記賬簿development

• .env.test

# 質(zhì)控環(huán)境變量
VITE_APP_TITLE=記賬簿test

• .env.production

# 生產(chǎn)環(huán)境變量
VITE_APP_TITLE=記賬簿

在vue里面使用

比如：

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

這里面有個問題需要注意：

就是字符串里面不能直接用import.meta.env.的方式使用，不然打包的時(shí)候會報(bào)錯，可以用’import.meta\u200b.env.VITE_APP_TITLE’的方式使用，這個其實(shí)在官網(wǎng)上有說到，不過沒怎么用到的話時(shí)間一長就容易忘了，貼下報(bào)錯信息，方便后面復(fù)查：

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!
npm ERR! Failed at the vite2vue3study@0.0.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

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

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論