vue3+vite.config.js 配置開發環境和生產環境

項目結構如下圖所示：

 

 

項目的根目錄：

新建.env.development(開發環境)和.env.production(生產環境)兩個文件

.env.development(開發環境)

`.env.development`
// 開發環境配置
VITE_BASIC_API = 'http://mqy53465878.cn/'
// VITE_BASIC_API = 'http://127.0.0.1:3000'

.env.production(生產環境)

`.env.production`
// 正式環境配置
VITE_BASIC_API = 'http://mqy53465878.cn/'

注意事項：

　　環境配置：必須以VITE開頭，例如：VITE_BASIC_API = 'http://mqy53465878.cn/'

 

vite.config.js配置如下：

 

 

import { defineConfig, loadEnv } from 'vite'

........

// 獲取當前環境的配置
const config = loadEnv(mode, './')

server: {
    host: '0.0.0.0',
    port: '8888',
    open: false,
    proxy: {
        '/adminapi': {
                // target: 'http://127.0.0.1:3000/',
                target: config.VITE_BASIC_API,
                changeOrigin: true,
         },
     }
},    

頁面獲取

獲取接口地址: import.meta.env.VITE_BASIC_API   //'http://mqy53465878.cn/'

  獲取開發環境: process.env.NODE_ENV  //development