- 在项目根目录新建 .env.development、.env.production、.env.test
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
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
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
- 创建代码提示 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
}
- 组件中使用
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
- vite.config.ts中使用
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, __dirname)
return {
plugins[],
base: env.VITE_RES_URL
}
})
- 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"
},