Vue3 Vite 配置多环境

该配置文件展示了如何在Vite项目中使用defineConfig函数设置环境变量,引入vue插件,并配置解析别名、热模块替换(HMR)、服务器代理以处理API请求,以及对CSS预处理器Less的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import {fileURLToPath,URL} from 'url'
import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode, command })=>{
	const config = loadEnv(mode, './')
	return{
		  plugins: [vue()],
		  resolve:{
		    alias:{
		      '@': fileURLToPath(new URL('./src/', import.meta.url))
		    }
		  },
		  server: {
		    hmr:{
		      overlay:false
		    },
		    host: "0.0.0.0",
		    cors: true,
		    port: 8991,
		    open: false, //自动打开
		    proxy: {
		      "^/api": {
		        target: config.VITE_BASE_RUL, // 真实接口地址, 后端给的基地址
		        changeOrigin: true, // 允许跨域
		        rewrite: (path) => path.replace(/^\/api/, "/api/"),
		      },
		    },
		  },
		  css: {
		    preprocessorOptions: {
		      less: {
		        charset: false,
		        additionalData: '@import "./src/assets/styles/global.less";',
		      },
		    },
		  }
	}
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值