vue3-vite 设置环境模式（打包）

1.vite.config.js同目录下建立三个文件夹，如下

//生产.env.production
VITE_MODE_NAME=production
VITE_APP_ID=123456
VITE_AGENT_ID=123456
VITE_LOGIN_TEST=false
VITE_RES_URL=./
VITE_APP_TITLE=''
VITE_EDITOR=webstorm

//开发.env.development
VITE_MODE_NAME=development
VITE_APP_ID=123456
VITE_AGENT_ID=123456
VITE_LOGIN_TEST=true
VITE_RES_URL=http://192.168.1.87:3000/
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


2. package.json，添加tset,development模式，build默认是生产环境

"scripts": {

  "dev": "vite --host",
  "build": "vite build",
  "test": "vite build --mode test",
  "development": "vite build --mode development",
  "serve": "vite preview"
},


3. vite.config.js
// 引入 loadEnv
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname) // loadEnv加载__dirname目录下的 mode文件，若mode为'development',则加载.env.development文件。

  return {
    plugins: [
      vue(),
    ],
    base: env.VITE_RES_URL
  }
})