vue3.0 + vite 多环境打包 代理设置

安装cross-env 
cross-env  通过js在平台设置不同的环境变量的工具
npm install --save-dev cross-env


新建

.env.development   文件

NODE_ENV = development
VITE_BUILD_ENV = 'development'
VITE_APP_BASE_API = 'http://xxx.xxx.x.xx:xxxx/api'

其他类似

修改package.json   （根据自己的实际情况增减）

"dev": "cross-env vite --mode development",
"test": "cross-env vite --mode test",
"product": "cross-env vite --mode production",
"build": "vite build",
"build:test": "cross-env vite build --mode test",
"build:product": "cross-env vite build --mode production",

使用

process.env.NODE_ENV  环境变量（package.json 中定义的变量）

axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_API;

import.meta.env.VITE_APP_BASE_API  请求地址（.env 定义的接口请求地址）




设置代理

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

export default ({mode}) => {
    return defineConfig({
        plugins: [vue()],
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src')//设置别名
            }
        },
        server: {
            port: 3000,//启动端口
            open: true,
            proxy: {
                // 选项写法
                '/api': loadEnv(mode, process.cwd()).VITE_APP_BASE_API //代理网址
            },
            cors: true
        }
    })
}