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
  }
})