在項(xiàng)目文件中新建文件.env .env.pro 兩個(gè)文件其中.env 是默認(rèn)設(shè)置 .env.pro 為正式環(huán)境設(shè)置
1、設(shè)置.env中的內(nèi)容信息 注意vue3+vite 必須使用VITE開頭的配置信息 否則無法獲取
NODE_ENV = "env" //
VITE_NODE_ENV = "env" //VITE開頭的給vue3+vite使用
如果不想使用VITE開頭自己修改就在vite.config.ts文件中添加envPrefix:“APP_”
//vite.config.ts
export default defineConfig({
plugins: [vue()],
envPrefix:"APP_",//APP_ 為自定義開頭名
})
2、在 vite 中使用環(huán)境變量，可以用 import.meta.env，有四種環(huán)境變量，如下所示：
MODE，用來指明現(xiàn)在所處于的模式，一般通過它進(jìn)行不同環(huán)境的區(qū)分，比如 dev、test、pre、prd 等等，默認(rèn)為：“development”
BASE_URL，用來請(qǐng)求靜態(tài)資源初始的 url
PROD，用來判斷當(dāng)前環(huán)境是否是正式環(huán)境
DEV，用來與 PROD 相反的環(huán)境
SSR，用來判斷是否是服務(wù)端渲染的環(huán)境
3、使用環(huán)境變量
使用 import.meta.env.VITE_NODE_ENV 獲取環(huán)境變量
console.log( import.meta.env) //查看相關(guān)信息 這里不顯示非VITE開頭的變量
//老版本的vue2+webpack的情況
還是使用 process.env.NODE_ENV
console.log( process.env) //查看相關(guān)信息
4、配置env.d.ts文件，為環(huán)境變量增加智能提示
正常使用的時(shí)候沒有提示信息，想增加提示信息在vite-env.d.ts或者env.d.ts進(jìn)行如下配置即可
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_NODE_ENV:string;//定義提示信息 數(shù)據(jù)是只讀的無法被修改
//多個(gè)變量定義多個(gè)...
}
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
5、在package.json中配置模式
上面使用的時(shí)候是固定寫法 需要切換.env 和 .env.pro 中不同的變量信息 在打包中配置 如下：
使用 --mode pro 進(jìn)行設(shè)置文章來源：http://www.zghlxwxcb.cn/news/detail-444130.html
"scripts": {
"serve": "vite", //未指定默認(rèn)取.env中的配置
"dev": "vite --mode dev", // 取 .env.dev文件中的配置
"pro": "vite --mode pro", // 取 .env.pro文件中的配置
"build": "vue-tsc --noEmit && vite build", //未指定默認(rèn)取.env中的配置
"build:dev": "vue-tsc --noEmit && vite build --mode dev", // build的時(shí)候取dev的配置
"build:pro": "vue-tsc --noEmit && vite build --mode pro", // build的時(shí)候取pro的配置
"preview": "vite preview"
},
最后, 想要在提交代碼時(shí)忽略本地.env文件，還要在.gitignore文件中添加.local文章來源地址http://www.zghlxwxcb.cn/news/detail-444130.html
node_modules
dist
dist-ssr
*.local
到了這里，關(guān)于vue3+vite中使用環(huán)境變量 .env 的一些配置情況說明的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
