238 lines
7.5 KiB
TypeScript
238 lines
7.5 KiB
TypeScript
import { resolve } from 'path';
|
||
import { defineConfig } from 'vite';
|
||
import vue from '@vitejs/plugin-vue';
|
||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||
import svgLoader from 'vite-svg-loader';
|
||
import AutoImport from 'unplugin-auto-import/vite';
|
||
import Components from 'unplugin-vue-components/vite';
|
||
import UnoCSS from 'unocss/vite';
|
||
import configArcoStyleImportPlugin from './config/plugin/arcoStyleImport';
|
||
import configCompressPlugin from './config/plugin/compress';
|
||
|
||
export default defineConfig({
|
||
server: {
|
||
open: true,
|
||
fs: {
|
||
strict: true,
|
||
},
|
||
historyApiFallback: true,
|
||
proxy: {
|
||
// RBAC 权限管理服务代理 - http://43.139.210.35:5281
|
||
// 注意：后端 API 路径包含 /rbac 前缀，所以不需要 rewrite
|
||
'/rbac': {
|
||
target: 'http://43.139.210.35:5281',
|
||
changeOrigin: true,
|
||
secure: false,
|
||
configure: (proxy, options) => {
|
||
proxy.on('proxyReq', (proxyReq, req, res) => {
|
||
console.log('[RBAC-5281] Sending Request:', req.method, req.url);
|
||
console.log('[RBAC-5281] Target Path:', proxyReq.path);
|
||
});
|
||
proxy.on('proxyRes', (proxyRes, req, res) => {
|
||
console.log(
|
||
'[RBAC-5281] Received Response:',
|
||
proxyRes.statusCode,
|
||
req.url
|
||
);
|
||
});
|
||
},
|
||
},
|
||
// 对应 nginx: location /api/trackApi -> http://43.139.210.35:8889
|
||
'/api/trackApi': {
|
||
target: 'http://43.139.210.35:8889',
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(/^\/api\/trackApi/, ''),
|
||
|
||
configure: (proxy, options) => {
|
||
proxy.on('error', (err, req, res) => {
|
||
console.log('proxy error', err);
|
||
});
|
||
proxy.on('proxyReq', (proxyReq, req, res) => {
|
||
console.log('[trackApi-8889] Sending Request to the Target:', req.method, req.url);
|
||
});
|
||
proxy.on('proxyRes', (proxyRes, req, res) => {
|
||
console.log(
|
||
'[trackApi-8889] Received Response from the Target:',
|
||
proxyRes.statusCode,
|
||
req.url
|
||
);
|
||
});
|
||
},
|
||
},
|
||
// 对应 nginx: location /api -> http://43.139.210.35:8888
|
||
'/api': {
|
||
target: 'http://43.139.210.35:8888',
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||
timeout: 30000,
|
||
proxyTimeout: 30000,
|
||
configure: (proxy, options) => {
|
||
proxy.on('proxyReq', (proxyReq, req, res) => {
|
||
console.log('[8888] Sending Request:', req.method, req.url);
|
||
console.log('[8888] Proxy Target:', proxyReq.path);
|
||
});
|
||
proxy.on('proxyRes', (proxyRes, req, res) => {
|
||
console.log(
|
||
'[8888] Received Response:',
|
||
proxyRes.statusCode,
|
||
req.url
|
||
);
|
||
});
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
// eslint({
|
||
// cache: false,
|
||
// include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
|
||
// exclude: ['node_modules'],
|
||
// }),
|
||
vue(),
|
||
vueJsx(),
|
||
svgLoader({ svgoConfig: {} }),
|
||
configArcoStyleImportPlugin(),
|
||
UnoCSS(),
|
||
|
||
AutoImport({
|
||
imports: ['vue', 'vue-router', 'vue-i18n', 'pinia', '@vueuse/core'],
|
||
dts: 'src/auto-imports.d.ts',
|
||
dirs: ['src/composables', 'src/store'],
|
||
vueTemplate: true,
|
||
eslintrc: {
|
||
enabled: true,
|
||
},
|
||
}),
|
||
Components({
|
||
extensions: ['vue'],
|
||
include: [/\.vue$/, /\.vue\?vue/],
|
||
dts: 'src/components.d.ts',
|
||
dirs: ['src/components'],
|
||
resolvers: [],
|
||
// directoryAsNamespace: true,
|
||
}),
|
||
// 生产环境启用gzip压缩
|
||
...(process.env.NODE_ENV === 'production' ? configCompressPlugin('gzip') : []),
|
||
],
|
||
resolve: {
|
||
alias: [
|
||
{
|
||
find: '@',
|
||
replacement: resolve(__dirname, './src'),
|
||
},
|
||
{
|
||
find: 'assets',
|
||
replacement: resolve(__dirname, './src/assets'),
|
||
},
|
||
{
|
||
find: 'vue-i18n',
|
||
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue
|
||
},
|
||
{
|
||
find: 'vue',
|
||
replacement: 'vue/dist/vue.esm-bundler.js', // compile template
|
||
},
|
||
{
|
||
find: 'xe-utils',
|
||
replacement: resolve(
|
||
__dirname,
|
||
'./node_modules/.pnpm/xe-utils@3.7.5/node_modules/xe-utils'
|
||
), // Add xe-utils alias
|
||
},
|
||
],
|
||
extensions: ['.ts', '.js'],
|
||
},
|
||
define: {
|
||
'process.env': {},
|
||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
|
||
__VUE_OPTIONS_API__: 'true',
|
||
__VUE_PROD_DEVTOOLS__: 'false',
|
||
},
|
||
optimizeDeps: {
|
||
// 移除 monaco-editor，让它按需加载，减少初始加载时间
|
||
include: ['vue', 'vue-router', 'pinia'],
|
||
// 排除 monaco-editor，因为它很大且只在特定页面使用
|
||
exclude: ['monaco-editor'],
|
||
// 确保 Vue 相关依赖的预构建顺序
|
||
esbuildOptions: {
|
||
target: 'es2015',
|
||
},
|
||
},
|
||
build: {
|
||
// 启用压缩（使用esbuild，Vite默认，性能更好）
|
||
minify: 'esbuild',
|
||
// 生产环境移除console和debugger
|
||
esbuild: {
|
||
drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
|
||
},
|
||
// 启用CSS代码分割
|
||
cssCodeSplit: true,
|
||
// 生成source map（可选，生产环境可以关闭以减小体积）
|
||
sourcemap: false,
|
||
// 构建输出配置
|
||
rollupOptions: {
|
||
output: {
|
||
// 手动代码分割，优化缓存
|
||
manualChunks: (id) => {
|
||
// node_modules中的包单独打包
|
||
if (id.includes('node_modules')) {
|
||
// vue核心库和vue相关库打包在一起，确保加载顺序
|
||
if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia') || id.includes('@vue')) {
|
||
return 'vue-vendor';
|
||
}
|
||
// monaco-editor单独打包（按需加载，不阻塞初始加载）
|
||
if (id.includes('monaco-editor')) {
|
||
return 'monaco-editor';
|
||
}
|
||
// echarts 相关库单独打包
|
||
if (id.includes('echarts') || id.includes('zrender')) {
|
||
return 'echarts-vendor';
|
||
}
|
||
// arco-design相关
|
||
if (id.includes('@arco-design')) {
|
||
return 'arco-vendor';
|
||
}
|
||
// vxe-table相关
|
||
if (id.includes('vxe-table')) {
|
||
return 'vxe-vendor';
|
||
}
|
||
// 其他第三方库
|
||
return 'vendor';
|
||
}
|
||
},
|
||
// 确保文件名包含hash，便于浏览器缓存
|
||
chunkFileNames: 'assets/js/[name]-[hash].js',
|
||
entryFileNames: 'assets/js/[name]-[hash].js',
|
||
assetFileNames: (assetInfo) => {
|
||
const info = assetInfo.name.split('.');
|
||
const ext = info[info.length - 1];
|
||
if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
|
||
return `assets/media/[name]-[hash].${ext}`;
|
||
}
|
||
if (/\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/.test(assetInfo.name)) {
|
||
return `assets/img/[name]-[hash].${ext}`;
|
||
}
|
||
if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
|
||
return `assets/fonts/[name]-[hash].${ext}`;
|
||
}
|
||
return `assets/[name]-[hash].${ext}`;
|
||
},
|
||
},
|
||
},
|
||
// 设置chunk大小警告限制
|
||
chunkSizeWarningLimit: 1000,
|
||
},
|
||
css: {
|
||
preprocessorOptions: {
|
||
less: {
|
||
modifyVars: {
|
||
hack: `true; @import (reference) "${resolve(
|
||
'./src/assets/style/breakpoint.less'
|
||
)}";`,
|
||
},
|
||
javascriptEnabled: true,
|
||
},
|
||
},
|
||
},
|
||
});
|