vue3.0 使用vite構建工具（開發環境與生產環境）

vue3.0 使用vite 構建工具相關

創建相關文件

在根目錄創建以下文件

.env.production（生產環境）
.env.development (開發環境)
.env.staging (預發布/ 可有可無)

在上面文件中添加以下代碼

• .env.production

  # .env.production
  
  NODE_ENV = production
  
  VITE_APP_BASEURL = ''
  
  VITE_APP_CLOUDKEY = ''
  
  

• .env.development

  # .env.development
  
  NODE_ENV = development
  
  VITE_APP_BASEURL = ''
  
  VITE_APP_CLOUDKEY = ''
  
  

• .env.production

  # .env.production
  
  NODE_ENV = production
  
  VITE_APP_BASEURL = ''
  
  VITE_APP_CLOUDKEY = ''
  
  

關於package.json 文件中的配置

• package.json

    "scripts": {
      "dev": "vite",
      "start": "vite --mode production",
      "build": "vite build",
      "build:stage": "vite build --mode staging",
      "build:env": "vite build --mode development",
    }
  
  

• yarn dev 默認在本地開啟測試環境的服務（mode='development'）

• yarn start 在本地開啟正式環境服務 (mode='production')

• yarn build 默認打包到正式環境（基礎配置取.env.production 文件中內容）

• yarn build:env 默認打包到測試環境（基礎配置取.env.development文件中內容）

• yarn build:stage 默認打包到預發布環境（基礎配置取.env.stageing文件中內容）

如何獲取 .env.XXX 中的內容

• 通過 import.meta.env獲取

• 文件內容如下

    BASE_URL: "/"
    DEV: false
    MODE: "production"
    PROD: true
    SSR: false
    VITE_APP_BASEURL: ""
    VITE_APP_CLOUDKEY: ""
  
  

如果需要在代碼中獲取這些變量的提示可以在src目錄下創建 env.d.ts 文件

• 文件內容如下

   interface ImportMetaEnv extends Readonly<Record<string, string>> {
      // 更多環境變量...
      readonly VITE_APP_BASEURL : string
      readonly VITE_APP_CLOUDKEY : string
   }
  
  interface ImportMeta {
      readonly env: ImportMetaEnv
  }
  
  

NODE_ENV的取值

• development

• production

• test