101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
import { defineConfig, loadEnv } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||
import { compression } from 'vite-plugin-compression2'
|
||
import path from 'path'
|
||
|
||
const resolve = dir => path.resolve(import.meta.dirname, dir)
|
||
|
||
export default defineConfig(({ mode }) => {
|
||
// 同时加载 VITE_ 与 VUE_APP_ 前缀，保持与 Vue CLI 时期的 .env 文件兼容
|
||
const env = loadEnv(mode, process.cwd(), ['VITE_', 'VUE_APP_', 'NODE_'])
|
||
// 颜色图片等上传文件的地址是相对路径 /static/...，浏览器会按页面来源解析。
|
||
// 开发服务器与后端不同源，必须代理到后端，否则图片 404 显示“加载失败”。
|
||
const backendOrigin = process.env.VUE_APP_BASE_API || env.VUE_APP_BASE_API || ''
|
||
const devProxyTarget = process.env.VITE_DEV_PROXY_TARGET || env.VITE_DEV_PROXY_TARGET || backendOrigin
|
||
// start-web.ps1 supplies a dedicated proxy target for LAN development.
|
||
// In that mode the browser must always use relative URLs, even though the
|
||
// legacy .env.development still contains a localhost API origin.
|
||
const browserBaseApi = devProxyTarget ? '' : backendOrigin
|
||
|
||
return {
|
||
base: '/',
|
||
envPrefix: ['VITE_', 'VUE_APP_'],
|
||
|
||
plugins: [
|
||
vue(),
|
||
// 替代 svg-sprite-loader，symbolId 保持 icon-[name] 不变
|
||
createSvgIconsPlugin({
|
||
iconDirs: [resolve('src/icons/svg')],
|
||
symbolId: 'icon-[name]'
|
||
}),
|
||
// 替代 compression-webpack-plugin
|
||
compression({
|
||
algorithm: 'gzip',
|
||
threshold: 10240,
|
||
include: /\.(js|html|css)$/,
|
||
deleteOriginalAssets: false
|
||
})
|
||
],
|
||
|
||
resolve: {
|
||
alias: {
|
||
'@': resolve('src'),
|
||
// 业务代码（Sidebar/TagsView/HeaderSearch）直接 import path 拼接路由路径，
|
||
// 浏览器无 Node 内置模块，需指向 polyfill；等价于 webpack 的 resolve.fallback
|
||
path: 'path-browserify'
|
||
},
|
||
// 与 Vue CLI 保持一致：允许 import 时省略 .vue 后缀
|
||
extensions: ['.mjs', '.js', '.jsx', '.json', '.vue']
|
||
},
|
||
|
||
// 业务代码沿用 process.env.VUE_APP_* 写法，此处做等价注入
|
||
define: {
|
||
'process.env.VUE_APP_BASE_API': JSON.stringify(browserBaseApi),
|
||
'process.env.NODE_ENV': JSON.stringify(mode === 'development' ? 'development' : 'production')
|
||
},
|
||
|
||
server: {
|
||
port: 9527,
|
||
open: false,
|
||
proxy: devProxyTarget ? {
|
||
'/api': { target: devProxyTarget, changeOrigin: true },
|
||
'/static': { target: devProxyTarget, changeOrigin: true }
|
||
} : undefined
|
||
},
|
||
|
||
css: {
|
||
preprocessorOptions: {
|
||
less: {
|
||
javascriptEnabled: true,
|
||
modifyVars: {
|
||
'border-radius-base': '2px'
|
||
}
|
||
},
|
||
scss: {
|
||
silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin']
|
||
}
|
||
}
|
||
},
|
||
|
||
build: {
|
||
outDir: 'dist',
|
||
sourcemap: false,
|
||
chunkSizeWarningLimit: 2000,
|
||
rollupOptions: {
|
||
output: {
|
||
// 对应 Vue CLI 的 splitChunks：element-plus 与其余三方库分开打包
|
||
manualChunks(id) {
|
||
if (!id.includes('node_modules')) return
|
||
if (/[\\/]element-plus[\\/]/.test(id)) return 'chunk-elementPlus'
|
||
return 'chunk-libs'
|
||
},
|
||
chunkFileNames: 'js/[name].[hash].js',
|
||
entryFileNames: 'js/[name].[hash].js',
|
||
assetFileNames: '[ext]/[name].[hash].[ext]'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|