import { fileURLToPath, URL } from 'node:url'
|
|
import { defineConfig, loadEnv } from 'vite'
|
import vue from '@vitejs/plugin-vue'
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
|
import AutoImport from 'unplugin-auto-import/vite'
|
import Components from 'unplugin-vue-components/vite'
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
|
// https://vitejs.dev/config/
|
export default defineConfig(({mode, command}) => {
|
let env = loadEnv(mode, process.cwd(), '')
|
return {
|
base:env.VITE_BASE_CONTEXT,
|
plugins: [
|
vue(),
|
vueJsx(),
|
AutoImport({
|
resolvers: [ElementPlusResolver()],
|
}),
|
Components({
|
resolvers: [ElementPlusResolver()],
|
}),
|
],
|
resolve: {
|
alias: {
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
}
|
},
|
// 打包配置
|
build: {
|
target: 'modules',
|
outDir: env.VITE_BASE_CONTEXT, //指定输出路径
|
assetsDir: 'assets', // 指定生成静态资源的存放路径
|
minify: 'terser' // 混淆器，terser构建后文件体积更小
|
},
|
|
// 本地运行配置，及反向代理配置
|
server: {
|
cors: true, // 默认启用并允许任何源
|
open: true, // 在服务器启动时自动在浏览器中打开应用程序
|
//反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
|
proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
|
[env.VITE_BASE_PATH] : {
|
target: env.VITE_BASE_URL, // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
|
changeOrigin: true,
|
ws: false, // 允许websocket代理
|
secure: false,
|
rewrite: (path) => path.replace(env.VITE_BASE_PATH, '')
|
}
|
}
|
}
|
}
|
|
})
|
