為什么需要境變量的配置
在很多的時候，我們會遇見這樣的問題。
開發環境的接口是:http://test.com/api
但是我們的生產環境地址是：http://yun.com/api
此時，我們打包的時候自動獲取生產環境的值，vite為我們提供了這樣的方式。
下面我們來看一下怎么操作
境變量的配置
在項目的根目錄下，創建 .env.development文件[開發]和.env.production[生產]。
在這兩個文件中聲明一個變量值。
VITE_NAME='生產環境' (.env.production 文件中寫的)
VITE_NAME='開發環境' (.env.development 文件中寫的)
需要注意的是，我們需要以'VITE_'大寫開頭。然后重新啟動服務{一定要重新啟動服務}
然后我們可以通過 import.meta.env 獲取我們定義的值。
有的小伙伴可能會說，如果大量的地方需要獲取環境 import.meta.env。
我們可以進行優化，我們可以將這個方法掛載到vue的原型上
將方法掛載到vue3.0的原型上
//在main.ts文件中
let app = createApp(App)
// 將獲取環境的方法掛載到vue的原型上，方便后面的使用
app.config.globalProperties.getEnv =import.meta.env
app.use(router).use(store).use(Button).use(VanImage).mount('#app')
如何使用原型中的方法
//引入
const { proxy }: any = getCurrentInstance();
console.log('輸出的值',proxy.getEnv )
//這樣就可以獲取環境了。
