vite 使用 process.env

.env.development

VITE_HOST = '127.0.0.1'
VITE_PORT = 3003
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist1'
VITE_API_DOMAIN = 'http://ip:8080/' //本地環境地址（可用於開發時聯調）

　.env.production

VITE_HOST = '127.0.0.1'
VITE_PORT = 3005
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist'
VITE_API_DOMAIN = 'http://ip:8080/'

vite.config.js

import vue from '@vitejs/plugin-vue'
import {defineConfig, loadEnv} from "vite";

export default ({command, mode}) => {
    const envConfig = loadEnv(mode, './');
    let config = {
        base: './',
        plugins: [vue()],
        optimizeDeps: {
            include: ['schart.js']
        },
        server: {
            host: envConfig.VITE_HOST,
            port: envConfig.VITE_PORT,
            // 是否自動在瀏覽器打開
            open: true,
            // 是否開啟 https
            https: false,
            // 服務端渲染
            ssr: false,
            base: envConfig.VITE_BASE_URL,
            outDir: envConfig.VITE_OUTPUT_DIR,
            define: {
                'process.env': {}
            }
        },
    };

    return defineConfig(config)
}

package.json

"scripts": {
    "dev": "vite --mode development",
    "test": "vite  --mode testing",
    "prod": "vite  --mode production",
    "serve": "vite preview"
  },

引入環境配置

import.meta.env.VITE_API_DOMAIN