快捷導(dǎo)航

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

更新時間：2023年10月25日 15:46:03 作者：啃火龍果的兔子

在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對vite環(huán)境變量相關(guān)知識感興趣的朋友跟隨小編一起看看吧

在不同的文件里面配置不同的環(huán)境變量，可以讓我們的配置更加容易維護(hù)和使用，這里我們說下vite配置環(huán)境變量和模式是怎么配置的。
Vite 在一個特殊的 import.meta.env 對象上暴露環(huán)境變量，官網(wǎng)上的東西咱這里就不抄了，O(∩_∩)O哈哈~
我們這里直接說怎么做的，畢竟官網(wǎng)上沒有實際使用的例子，在下在實際使用的時候還遇到點問題，當(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"
  }

在項目目錄下增加環(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.的方式使用，不然打包的時候會報錯，可以用’import.meta\u200b.env.VITE_APP_TITLE’的方式使用，這個其實在官網(wǎng)上有說到，不過沒怎么用到的話時間一長就容易忘了，貼下報錯信息，方便后面復(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

到此這篇關(guān)于vite添加環(huán)境變量import.meta.env的文章就介紹到這了,更多相關(guān)vite環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: