為什么需要境變量的配置
在很多的時(shí)候导街，我們會(huì)遇見這樣的問(wèn)題。
開發(fā)環(huán)境的接口是:http://test.com/api
但是我們的生產(chǎn)環(huán)境地址是：http://yun.com/api
此時(shí)踊赠，我們打包的時(shí)候自動(dòng)獲取生產(chǎn)環(huán)境的值添瓷，vite為我們提供了這樣的方式。
下面我們來(lái)看一下怎么操作
在項(xiàng)目的根目錄下痢士，創(chuàng)建 .env.development文件[開發(fā)]和.env.production[生產(chǎn)]彪薛。
在這兩個(gè)文件中聲明一個(gè)變量值茂装。
VITE_NAME='生產(chǎn)環(huán)境' (.env.production 文件中寫的)
VITE_NAME='開發(fā)環(huán)境' (.env.development 文件中寫的)
需要注意的是，我們需要以'VITE_'大寫開頭善延。然后重新啟動(dòng)服務(wù){(diào)一定要重新啟動(dòng)服務(wù)}
然后我們可以通過(guò) import.meta.env 獲取我們定義的值少态。
有的小伙伴可能會(huì)說(shuō)，如果大量的地方需要獲取環(huán)境 import.meta.env易遣。
我們可以進(jìn)行優(yōu)化彼妻，我們可以將這個(gè)方法掛載到vue的原型上
將方法掛載到vue3.0的原型上
//在main.ts文件中
let app = createApp(App)
// 將獲取環(huán)境的方法掛載到vue的原型上，方便后面的使用
app.config.globalProperties.getEnv =import.meta.env
app.use(router).use(store).use(Button).use(VanImage).mount('#app')
如何使用原型中的方法
//引入
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance();
console.log('輸出的值',proxy.getEnv )
//這樣就可以獲取環(huán)境了豆茫。
原文地址
