vue3 + vite 项目搭建 - 配置环境变量env

1. 在项目根目录新建 .env.development、.env.production、.env.test

//开发.env.development
VITE_MODE_NAME=development
VITE_APP_ID=123456
VITE_AGENT_ID=123456
VITE_LOGIN_TEST=true
VITE_RES_URL=https://www.baidu.com
VITE_APP_TITLE=风控管理平台
VITE_EDITOR=webstorm

//生产.env.production
VITE_MODE_NAME=production
VITE_APP_ID=123456
VITE_AGENT_ID=123456
VITE_LOGIN_TEST=false
VITE_RES_URL=https://www.baidu.com
VITE_APP_TITLE=风控管理平台
VITE_EDITOR=webstorm

//测试环境.env.test
VITE_MODE_NAME=test
VITE_APP_ID=123456
VITE_AGENT_ID=123456
VITE_LOGIN_TEST=true
VITE_RES_URL=https://www.baidu.com
VITE_APP_TITLE=风控管理平台
VITE_EDITOR=webstorm

1. 创建代码提示 env.d.ts

// src/types/env.d.ts
interface ImportMetaEnv {
  VITE_MODE_NAME: string,
  VITE_APP_ID: string,
  VITE_AGENT_ID: string,
  VITE_LOGIN_TEST: string,
  VITE_RES_URL: string,
  VITE_APP_TITLE: string
}

1. 组件中使用

import.meta.VITE_MODE_NAME
import.meta.VITE_APP_ID
import.meta.VITE_AGENT_ID
import.meta.VITE_LOGIN_TEST
import.meta.VITE_RES_URL
import.meta.VITE_APP_TITLE

1. vite.config.ts中使用

import { defineConfig, loadEnv } from \'vite\'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
	plugins[],
	base: env.VITE_RES_URL
  }
})

1. package.json中配置打包命令

\"scripts\": {
    \"dev\": \"vite --host\",
    \"build\": \"vue-tsc --noEmit && vite build\",
    \"test\": \"vite build --mode test\",
    \"serve\": \"vite preview\",
    \"use:npm\": \"nrm use npm\",
    \"use:taobao\": \"nrm use taobao\",
    \"update:des\": \"cnpm i\",
    \"update\": \"ncu -u && cnpm i\",
    \"update:globle\": \"ncu -g\"
  },