vue3 + vite 项目搭建 - 配置环境变量env_vite vue3 scss使用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
1
2
3
4
5
6
7
8

//生产.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
1
2
3
4
5
6
7
8

//测试环境.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
2
3
4
5
6
7
8

2. 创建代码提示 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
2
3
4
5
6
7
8
9
10

3. 组件中使用

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
2
3
4
5
6

4. 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
2
3
4
5
6
7
8

5. 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"
  },
1
2
3
4
5
6
7
8
9
10
11