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