Vite+Vue+TS configuration .env environment file

view2

vue2使用 process.env获取环境变量

view 3

process.env 在vue3中不生效
vue3中使用 import.meta.env 获取环境变量

import.meta.envVite exposes environment variables on a special object

Configuration

1. Create a new .env.developmentand.env.production

   The file name must be defined like this, otherwise it cannot be read.

   Write node environment variables and other variables . Other variables must VITE_start with

   • node environment variables

     1. Must NODE_start with
     2. NODE_The value after will overwrite the previous value.

   • Other variables

     1. Must VITE_start with
     2. If it doesn’t VITE_start with, it won’t be
     3. VITE_The key-value pairs at the beginning will not overwrite the previous ones.

   Create a file.env.development

# 开发环境配置
NODE_ENV='development'

# 本地服务端口
VITE_PORT=3000

# 页面标题
VITE_TITLE='**********系统-开发'

# 超时时间(ms)
VITE_AXIOS_TIMEOUT=60000

# 删除 console
VITE_DROP_CONSOLE=false;

创建文件`.env.production`

# 开发环境配置
NODE_ENV='production'

# 本地服务端口
VITE_PORT=3001

# 页面标题
VITE_TITLE='**********系统'

# 超时时间(ms)
VITE_AXIOS_TIMEOUT=6000

# 删除 console
VITE_DROP_CONSOLE=true;

2. tsconfig.jsonAdded in to "types": [ "vite/client" ]provide import.meta.envtype definitions for environment variables injected on Vite

"compilerOptions": {
    
    
  "types": [  "vite/client" ]
}

3. src目录Create a file under env.d.tsand add the following code to VITE_ get TypeScriptthe smart tips for these user-defined environment variables prefixed with

interface ImportMetaEnv {
    
    
  // 端口
  readonly VITE_PORT: number
  // 标题
  readonly VITE_TITLE: string
  // 超时时间
  readonly VITE_AXIOS_TIMEOUT: string
  // 删除console.log
  readonly VITE_DROP_CONSOLE: boolean
  // 更多环境变量...
}

interface ImportMeta {
    
    
  readonly env: ImportMetaEnv
}

在这里插入图片描述

4. package.jsonModifications inside scripts, adding multiple environment modes

"scripts": {
    
    
  "dev": "vite serve --mode development",
  "test": "vite serve --mode test",
  "prod": "vite serve --mode production",
  "build:dev": "vue-tsc --noEmit && vite build --mode development",
  "build:test": "vue-tsc --noEmit && vite build --mode test",
  "build:prod": "vue-tsc --noEmit && vite build --mode production",
  "serve": "vite preview"
}

use

Used in vue page

console.log('VITE_PORT:' + import.meta.env.VITE_PORT);
console.log('VITE_TITLE:' + import.meta.env.VITE_TITLE);
console.log('VITE_AXIOS_TIMEOUT:' + import.meta.env.VITE_AXIOS_TIMEOUT);
console.log('VITE_DROP_CONSOLE:' + import.meta.env.VITE_DROP_CONSOLE);

Trap a trap

vite.config.tsNot available inimport.meta.env

Use loadEnv(mode, process.cwd()).VITE_PORT, but then the TS prompt will disappear! ! !

import {
    
    ConfigEnv, UserConfig, loadEnv} from 'vite'

export default ({
    
    command, mode}: ConfigEnv): UserConfig => {
    
    
  const isBuild = command === 'build';
  /**
   * mode：模式
   * envDir：环境变量配置文件所在目录
   * prefix：接受的环境变量前缀，默认为 VITE_，这就应证了文档中提到的内容
   */
  const envConfig = loadEnv(mode, process.cwd());
  const VITE_PORT = Number(envConfig.VITE_PORT);
  const VITE_DROP_CONSOLE = Boolean(envConfig.VITE_DROP_CONSOLE);
  const VITE_DROP_DEBUGGER = Boolean(envConfig.VITE_DROP_DEBUGGER);

  return {
    
    
    ...
    server: {
    
    
      // 指定服务器端口
      port: VITE_PORT,
      ...
      }
    },
    build: {
    
    
      ...
      terserOptions: {
    
    
        compress: {
    
    
          keep_infinity: true,
          drop_console: VITE_DROP_CONSOLE,
          drop_debugger: VITE_DROP_DEBUGGER
        }
      },
    }
  }
};

Trap 2

You cannot use import.meta.env. directly in a string...