126 lines
3.6 KiB
JavaScript
126 lines
3.6 KiB
JavaScript
import vue from "@vitejs/plugin-vue";
|
||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||
import path from "path";
|
||
import AutoImport from "unplugin-auto-import/vite";
|
||
import { ElementPlusResolver, NaiveUiResolver } from "unplugin-vue-components/resolvers";
|
||
import Components from "unplugin-vue-components/vite";
|
||
import { loadEnv } from "vite";
|
||
import vitePluginCompression from "vite-plugin-compression";
|
||
import { createHtmlPlugin } from "vite-plugin-html";
|
||
import Inspect from "vite-plugin-inspect";
|
||
import requireTransform from "vite-plugin-require-transform";
|
||
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
|
||
import vueDevTools from 'vite-plugin-vue-devtools';
|
||
import svgLoader from "vite-svg-loader";
|
||
|
||
export default ({ mode }) => {
|
||
const env = loadEnv(mode, process.cwd());
|
||
return {
|
||
envDir: "./env",
|
||
plugins: [
|
||
vue(),
|
||
vueDevTools({
|
||
enabled: 'trae',
|
||
}),
|
||
// vueDevTools({
|
||
// launchEditor: 'webstorm',
|
||
// }),
|
||
vueJsx(),
|
||
Inspect(),
|
||
vueDevTools(),
|
||
requireTransform({
|
||
fileRegex: /.vue$|.png$|.ts$|.jpg$|.svg$/,
|
||
}), //配置require
|
||
createSvgIconsPlugin({
|
||
iconDirs: [path.resolve(process.cwd(), "src/icons")],
|
||
symbolId: "icon-[dir]-[name]",
|
||
}),
|
||
vitePluginCompression(),
|
||
AutoImport({
|
||
imports: [
|
||
"vue",
|
||
{
|
||
"naive-ui": [
|
||
"useDialog",
|
||
"useMessage",
|
||
"useNotification",
|
||
"useLoadingBar",
|
||
],
|
||
},
|
||
],
|
||
resolvers: [ElementPlusResolver()], // 合并 ElementPlus 的配置
|
||
}),
|
||
Components({
|
||
resolvers: [NaiveUiResolver(), ElementPlusResolver()], // 合并组件解析器
|
||
dirs: ["src/components"],
|
||
extensions: ["vue"],
|
||
deep: true,
|
||
}),
|
||
Components({
|
||
resolvers: [ElementPlusResolver()],
|
||
}),
|
||
svgLoader(),
|
||
createHtmlPlugin({
|
||
inject: {
|
||
data: {
|
||
title: env.VITE_APP_TITLE || "丰链管理系统",
|
||
},
|
||
},
|
||
}),
|
||
],
|
||
css: {
|
||
preprocessorOptions: {
|
||
scss: {
|
||
additionalData: '@import "@/assets/css/common.scss";',
|
||
// 在开发过程中关闭Sass弃用警告（如@import）
|
||
|
||
silenceDeprecations: ["import", "global-builtin"],
|
||
// 使用现代编译器API来避免遗留的JS API警告
|
||
|
||
api: "modern-compiler",
|
||
// 只显示我们代码中的弃用，不显示依赖关系
|
||
|
||
quietDeps: true,
|
||
},
|
||
},
|
||
},
|
||
resolve: {
|
||
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
|
||
alias: [
|
||
{
|
||
find: "@/",
|
||
replacement: path.resolve(process.cwd(), "src") + "/",
|
||
},
|
||
],
|
||
},
|
||
server: {
|
||
host: "0.0.0.0", // 监听所有网络接口
|
||
open: true,
|
||
hmr: true,
|
||
},
|
||
logLevel: "error",
|
||
build: {
|
||
minify: "esbuild", // 由 terser 改为 esbuild，构建速度提升约 20-40%
|
||
sourcemap: false, // 关闭 sourcemap 生成，减少构建时间
|
||
reportCompressedSize: false, // 关闭压缩大小报告，减少构建时间
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks: {
|
||
// 优化分包策略，提高缓存效率
|
||
"vue-vendor": ["vue", "vue-router", "pinia"],
|
||
"naive-ui": ["naive-ui"],
|
||
"element-plus": ["element-plus"],
|
||
},
|
||
},
|
||
},
|
||
terserOptions: {
|
||
// 清除console和debugger
|
||
compress: {
|
||
// drop_console: true,
|
||
drop_debugger: true,
|
||
},
|
||
},
|
||
},
|
||
};
|
||
};
|