vite.config.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. import vue from "@vitejs/plugin-vue";
  2. import { type ConfigEnv, type UserConfig, loadEnv, defineConfig, PluginOption } from "vite";
  3. import AutoImport from "unplugin-auto-import/vite";
  4. import Components from "unplugin-vue-components/vite";
  5. import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
  6. import { mockDevServerPlugin } from "vite-plugin-mock-dev-server";
  7. import UnoCSS from "unocss/vite";
  8. import { resolve } from "path";
  9. import { name, version, engines, dependencies, devDependencies } from "./package.json";
  10. // MCP 插件:为项目开启 MCP Server(仅开发环境)
  11. // 使用前请先安装:pnpm add -D vite-plugin-vue-mcp
  12. import { VueMcp } from "vite-plugin-vue-mcp";
  13. // 平台的名称、版本、运行所需的 node 版本、依赖、构建时间的类型提示
  14. const __APP_INFO__ = {
  15. pkg: { name, version, engines, dependencies, devDependencies },
  16. buildTimestamp: Date.now(),
  17. };
  18. const pathSrc = resolve(__dirname, "src");
  19. // Vite配置 https://cn.vitejs.dev/config
  20. export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  21. const env = loadEnv(mode, process.cwd());
  22. const isProduction = mode === "production";
  23. return {
  24. resolve: {
  25. alias: {
  26. "@": pathSrc,
  27. },
  28. },
  29. css: {
  30. preprocessorOptions: {
  31. // 定义全局 SCSS 变量
  32. scss: {
  33. additionalData: `@use "@/styles/variables.scss" as *;`,
  34. },
  35. },
  36. },
  37. server: {
  38. host: "0.0.0.0",
  39. port: +env.VITE_APP_PORT,
  40. open: true,
  41. hmr: true,
  42. proxy: {
  43. // 代理 /dev-api 的请求
  44. [env.VITE_APP_BASE_API]: {
  45. changeOrigin: true,
  46. // 代理目标地址:https://api.youlai.tech
  47. target: env.VITE_APP_API_URL,
  48. rewrite: (path: string) => path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
  49. },
  50. },
  51. },
  52. plugins: [
  53. vue(),
  54. ...(env.VITE_MOCK_DEV_SERVER === "true" ? [mockDevServerPlugin()] : []),
  55. // MCP 插件:仅在开发环境启用,用于 AI 工具集成,让 Cursor AI 能够读取应用运行时的 Store 状态,帮助调试和理解代码
  56. ...(!isProduction ? [VueMcp()] : []),
  57. UnoCSS(),
  58. // API 自动导入
  59. AutoImport({
  60. // 导入 Vue 函数,如:ref, reactive, toRef 等
  61. imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
  62. resolvers: [
  63. // 导入 Element Plus函数,如:ElMessage, ElMessageBox 等
  64. ElementPlusResolver({ importStyle: "sass" }),
  65. ],
  66. eslintrc: {
  67. enabled: false,
  68. filepath: "./.eslintrc-auto-import.json",
  69. globalsPropValue: true,
  70. },
  71. vueTemplate: true,
  72. // 导入函数类型声明文件路径 (false:关闭自动生成)
  73. dts: false,
  74. // dts: "src/types/auto-imports.d.ts",
  75. }),
  76. // 组件自动导入
  77. Components({
  78. resolvers: [
  79. // 导入 Element Plus 组件
  80. ElementPlusResolver({ importStyle: "sass" }),
  81. ],
  82. // 指定自定义组件位置(默认:src/components)
  83. dirs: ["src/components", "src/**/components"],
  84. // 导入组件类型声明文件路径 (false:关闭自动生成)
  85. dts: false,
  86. // dts: "src/types/components.d.ts",
  87. }),
  88. ] as PluginOption[],
  89. // 预加载项目必需的组件
  90. optimizeDeps: {
  91. include: [
  92. "vue",
  93. "vue-router",
  94. "element-plus",
  95. "pinia",
  96. "axios",
  97. "@vueuse/core",
  98. "codemirror-editor-vue3",
  99. "default-passive-events",
  100. "exceljs",
  101. "path-to-regexp",
  102. "echarts/core",
  103. "echarts/renderers",
  104. "echarts/charts",
  105. "echarts/components",
  106. "vue-i18n",
  107. "nprogress",
  108. "sortablejs",
  109. "qs",
  110. "path-browserify",
  111. "@stomp/stompjs",
  112. "@element-plus/icons-vue",
  113. "element-plus/es",
  114. "element-plus/es/locale/lang/en",
  115. "element-plus/es/locale/lang/zh-cn",
  116. "element-plus/es/components/alert/style/index",
  117. "element-plus/es/components/avatar/style/index",
  118. "element-plus/es/components/backtop/style/index",
  119. "element-plus/es/components/badge/style/index",
  120. "element-plus/es/components/base/style/index",
  121. "element-plus/es/components/breadcrumb-item/style/index",
  122. "element-plus/es/components/breadcrumb/style/index",
  123. "element-plus/es/components/button/style/index",
  124. "element-plus/es/components/card/style/index",
  125. "element-plus/es/components/cascader/style/index",
  126. "element-plus/es/components/checkbox-group/style/index",
  127. "element-plus/es/components/checkbox/style/index",
  128. "element-plus/es/components/col/style/index",
  129. "element-plus/es/components/color-picker/style/index",
  130. "element-plus/es/components/config-provider/style/index",
  131. "element-plus/es/components/date-picker/style/index",
  132. "element-plus/es/components/descriptions-item/style/index",
  133. "element-plus/es/components/descriptions/style/index",
  134. "element-plus/es/components/dialog/style/index",
  135. "element-plus/es/components/divider/style/index",
  136. "element-plus/es/components/drawer/style/index",
  137. "element-plus/es/components/dropdown-item/style/index",
  138. "element-plus/es/components/dropdown-menu/style/index",
  139. "element-plus/es/components/dropdown/style/index",
  140. "element-plus/es/components/empty/style/index",
  141. "element-plus/es/components/form-item/style/index",
  142. "element-plus/es/components/form/style/index",
  143. "element-plus/es/components/icon/style/index",
  144. "element-plus/es/components/image-viewer/style/index",
  145. "element-plus/es/components/image/style/index",
  146. "element-plus/es/components/input-number/style/index",
  147. "element-plus/es/components/input-tag/style/index",
  148. "element-plus/es/components/input/style/index",
  149. "element-plus/es/components/link/style/index",
  150. "element-plus/es/components/loading/style/index",
  151. "element-plus/es/components/menu-item/style/index",
  152. "element-plus/es/components/menu/style/index",
  153. "element-plus/es/components/message-box/style/index",
  154. "element-plus/es/components/message/style/index",
  155. "element-plus/es/components/notification/style/index",
  156. "element-plus/es/components/option/style/index",
  157. "element-plus/es/components/pagination/style/index",
  158. "element-plus/es/components/popover/style/index",
  159. "element-plus/es/components/progress/style/index",
  160. "element-plus/es/components/radio-button/style/index",
  161. "element-plus/es/components/radio-group/style/index",
  162. "element-plus/es/components/radio/style/index",
  163. "element-plus/es/components/row/style/index",
  164. "element-plus/es/components/scrollbar/style/index",
  165. "element-plus/es/components/select/style/index",
  166. "element-plus/es/components/skeleton-item/style/index",
  167. "element-plus/es/components/skeleton/style/index",
  168. "element-plus/es/components/step/style/index",
  169. "element-plus/es/components/steps/style/index",
  170. "element-plus/es/components/sub-menu/style/index",
  171. "element-plus/es/components/switch/style/index",
  172. "element-plus/es/components/tab-pane/style/index",
  173. "element-plus/es/components/table-column/style/index",
  174. "element-plus/es/components/table/style/index",
  175. "element-plus/es/components/tabs/style/index",
  176. "element-plus/es/components/tag/style/index",
  177. "element-plus/es/components/text/style/index",
  178. "element-plus/es/components/time-picker/style/index",
  179. "element-plus/es/components/time-select/style/index",
  180. "element-plus/es/components/timeline-item/style/index",
  181. "element-plus/es/components/timeline/style/index",
  182. "element-plus/es/components/tooltip/style/index",
  183. "element-plus/es/components/tree-select/style/index",
  184. "element-plus/es/components/tree/style/index",
  185. "element-plus/es/components/upload/style/index",
  186. "element-plus/es/components/watermark/style/index",
  187. "element-plus/es/components/checkbox-button/style/index",
  188. "element-plus/es/components/space/style/index",
  189. ],
  190. },
  191. // 构建配置
  192. build: {
  193. chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
  194. minify: isProduction ? "terser" : false, // 只在生产环境启用压缩
  195. terserOptions: isProduction
  196. ? {
  197. compress: {
  198. keep_infinity: true, // 防止 Infinity 被压缩成 1/0,这可能会导致 Chrome 上的性能问题
  199. drop_console: true, // 生产环境去除 console.log, console.warn, console.error 等
  200. drop_debugger: true, // 生产环境去除 debugger
  201. pure_funcs: ["console.log", "console.info"], // 移除指定的函数调用
  202. },
  203. format: {
  204. comments: false, // 删除注释
  205. },
  206. }
  207. : {},
  208. rollupOptions: {
  209. output: {
  210. // manualChunks: {
  211. // "vue-i18n": ["vue-i18n"],
  212. // },
  213. // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
  214. entryFileNames: "js/[name].[hash].js",
  215. // 用于命名代码拆分时创建的共享块的输出命名
  216. chunkFileNames: "js/[name].[hash].js",
  217. // 用于输出静态资源的命名,[ext]表示文件扩展名
  218. assetFileNames: (assetInfo: any) => {
  219. const info = assetInfo.name.split(".");
  220. let extType = info[info.length - 1];
  221. // console.log('文件信息', assetInfo.name)
  222. if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
  223. extType = "media";
  224. } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
  225. extType = "img";
  226. } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
  227. extType = "fonts";
  228. }
  229. return `${extType}/[name].[hash].[ext]`;
  230. },
  231. },
  232. },
  233. },
  234. define: {
  235. __APP_INFO__: JSON.stringify(__APP_INFO__),
  236. },
  237. };
  238. });