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

最后

以上就是美满灰狼为你收集整理的vue3.0 + vite 多环境打包 代理设置的全部内容，希望文章能够帮你解决vue3.0 + vite 多环境打包 代理设置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。