vue3配置使用環境變量.env.development

參考:https://blog.csdn.net/perfect2011/article/details/129930819
1.新建環境配置文件,根目錄
.env 基礎系統變量,無論何種環境,都可使用其中配置的值,其他環境中的變量會覆蓋.env中的同名變量。
.env.development 開發環境
.env.production 生產環境
.env.staging 測試環境

2.vue3使用vite進行編譯,所以變量都要以 VITE_ 開頭,例如.env.development中
# 開發環境變量
NODE_ENV = 'development'
VITE_TITLE = '開發環境Title'

3.使用多環境配置,package.json文件

"scripts": {
    "dev": "vite --mode development",
    "stage": "vite --mode staging",
    "prod": "vite --mode production",
    "preview": "vite preview",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:stage": "vite build --mode staging"
  },


4.使用環境變量 import.meta.env.VITE_TITLE
當使用 cnpm run dev 的時候,這個值就是 開發環境Title
cnpm run stage 就是 測試環境Title
cnpm run build 默認就是生產環境
如果編譯工具是webpack,那就是用process.env.VITE_TITLE

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章