vite.config.ts 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import vue from '@vitejs/plugin-vue';
  2. import { resolve } from 'path';
  3. import { defineConfig, ConfigEnv } from 'vite';
  4. import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'; // setup语法糖设置name
  5. import viteCompression from 'vite-plugin-compression'; //开启gzip打包压缩
  6. import vueJsx from '@vitejs/plugin-vue-jsx'; // jsx
  7. import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
  8. import { visualizer } from "rollup-plugin-visualizer";
  9. // @ts-ignore
  10. export default defineConfig((mode: ConfigEnv) => {
  11. return {
  12. plugins: [
  13. vue(),
  14. vueSetupExtend(),
  15. viteCompression(),
  16. vueJsx({
  17. // options are passed on to @vue/babel-plugin-jsx
  18. }),
  19. viteCommonjs(),
  20. visualizer({
  21. open: true, // true 打包完自动打开分析页面,false 不会自动弹出
  22. filename: "stats.html", // 分析图生成的文件名
  23. gzipSize: true, // 是否统计并显示gzip
  24. brotliSize: true, // 是否统计并显示brotli
  25. }),
  26. ],
  27. root: process.cwd(),
  28. resolve: { alias: { '@': resolve(__dirname, './src') } },
  29. base: mode.command === 'serve' ? './' : '/',
  30. hmr: true,
  31. server: {
  32. host: '0.0.0.0',
  33. port: 8888,
  34. open: true, // 是否打开浏览器
  35. },
  36. build: {
  37. outDir: 'dist',
  38. sourcemap: false, // 是否生成 sourceMap 文件
  39. reportCompressedSize: false, // 关闭文件计算
  40. chunkSizeWarningLimit: 1500,
  41. rollupOptions: {
  42. output: {
  43. // 最小化拆分包
  44. manualChunks(id: any): string {
  45. if (id.includes('node_modules')) {
  46. return id.toString().split('node_modules/')[1].split('/')[0].toString();
  47. }
  48. },
  49. entryFileNames: `assets/[name].[hash].js`,
  50. chunkFileNames: `assets/[name].[hash].js`,
  51. assetFileNames: `assets/[name].[hash].[ext]`,
  52. compact: true,
  53. },
  54. },
  55. minify: 'terser',
  56. terserOptions: {
  57. //生产环境时移除console和debugger
  58. compress: {
  59. drop_console: false,
  60. drop_debugger: true,
  61. },
  62. },
  63. },
  64. css: {
  65. preprocessorOptions: {
  66. css: { charset: false },
  67. scss: {
  68. api: 'modern-compiler', // or 'modern'
  69. silenceDeprecations: ['legacy-js-api'],
  70. },
  71. },
  72. },
  73. };
  74. });