為什麼需要境變數的配置
境變數的配置在很多的時候,我們會遇見這樣的問題。
開發環境的介面是:
此時,我們打包的時候自動獲取生產環境的值,vite為我們提供了這樣的方式。
下面我們來看一下怎麼操作
將方法掛載到vue3.0的原型上在專案的根目錄下,建立 .env.development檔案[開發]和.env.production[生產]。
在這兩個檔案中宣告乙個變數值。
vite_name='生產環境' (.env.production 檔案中寫的)
vite_name='開發環境' (.env.development 檔案中寫的)
需要注意的是,我們需要以'vite_'大寫開頭。然後重新啟動服務
然後我們可以通過 import.meta.env 獲取我們定義的值。
有的小夥伴可能會說,如果大量的地方需要獲取環境 import.meta.env。
我們可以進行優化,我們可以將這個方法掛載到vue的原型上
如何使用原型中的方法//在main.ts檔案中
// 將獲取環境的方法掛載到vue的原型上,方便後面的使用
//引入
const : any = getcurrentinstance();
console.log('輸出的值',proxy.getenv )
//這樣就可以獲取環境了。
vue開發環境 生產環境配置
vue開發環境 生產環境配置 首先生成三個檔案 env env.development env.production 他會根據你執行的環境 去自動走相應的檔案 env node env production env.development env.production node env produc...
webpack生產環境和開發環境的配置
最近在做公司遊戲預約頁面的時候,在配置webpack的時候,忽略了生產模式切換,導致開發過程中有些痛苦,當改動樣式或者某個外掛程式配置時,本地server要等待編譯很久才生效。用了很久的webpack做開發,之前一直沒太在意,現在特地整理下,也為以後做專案更加規範吧。在配置前,還是先了解下生產環境和...
vue3 0 配置開發環境和生產環境
前言 開發過程 測試過程 生產過程使用的介面位址不能,還有執行的操作可能也不一樣,也就需要實現配置好開發環境 測試環境 生產環境,需要什麼環境下的配置直接使用即可。1 在src同級目錄也就是根目錄下新建檔案 env.development 開發環境 env.test 測試環境 env.product...