vite.config.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import { defineConfig } from 'vite';
  2. import path from 'path';
  3. import react from '@vitejs/plugin-react-swc';
  4. import pxtovw from 'postcss-px-to-viewport';
  5. import qiankun from 'vite-plugin-qiankun'; // 引入qiankun插件
  6. //配置参数
  7. const usePxtovw = pxtovw({
  8. viewportWidth: 1920,
  9. viewportUnit: 'vw'
  10. });
  11. // https://vitejs.dev/config/
  12. export default defineConfig(({ mode }) => {
  13. const isDev = mode === 'development'
  14. return {
  15. plugins: [
  16. qiankun('qiankun-child', { // 微应用名字,与主应用注册的微应用名字保持一致
  17. useDevMode: true, // 如果是在主应用中加载子应用vite,必须打开这个,否则vite加载不成功, 单独运行没影响
  18. }),
  19. !isDev && react(),
  20. ],
  21. resolve: {
  22. alias: {
  23. '@assets': path.resolve(__dirname, './src/assets'),
  24. '@components': path.resolve(__dirname, './src/components'),
  25. '@pages': path.resolve(__dirname, './src/pages'),
  26. '@routes': path.resolve(__dirname, './src/routes'),
  27. '@store': path.resolve(__dirname, './src/store'),
  28. '@tools': path.resolve(__dirname, './src/tools'),
  29. '@api': path.resolve(__dirname, './src/api'),
  30. '@envConfig': path.resolve(__dirname, './src/envConfig'),
  31. },
  32. },
  33. base: '/', // /drgs
  34. server: {
  35. host: '0.0.0.0',
  36. port: 8090,
  37. https: false, // 是否开启 https
  38. open: false, // 项目启动时是否打开浏览器
  39. cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源,传递一个 选项对象 来调整行为或设为 false 表示禁用。
  40. base: '/', // 用于代理 Vite 作为子文件夹时使用。
  41. headers: {
  42. 'Access-Control-Allow-Origin': '*'
  43. },
  44. origin: 'http://localhost:8090',
  45. proxy: {
  46. '^/reactApi': {
  47. target: 'http://localhost:8090/',
  48. rewrite: path => path.replace(/^\/reactApi/, ''),
  49. changeOrigin: true
  50. },
  51. '/dip/sysInternalMutiple': {
  52. target: 'https://172.16.1.6',
  53. secure: false,
  54. ws: true,
  55. changeOrigin: true,
  56. },
  57. }
  58. },
  59. build: {
  60. outDir: 'dist', // 打包文件 默认dist
  61. minify: 'terser',
  62. chunkSizeWarningLimit: 2000, // 文件大小,默认500kb,生成的一个或多个文件的大小超过该值时,Vite 会发出警告提示
  63. // 打包清除console和debugger
  64. terserOptions: {
  65. compress: {
  66. drop_console: true,
  67. drop_debugger: true
  68. }
  69. },
  70. rollupOptions: {
  71. output: {
  72. // 最小化拆分包
  73. manualChunks(id) {
  74. if (id.includes('node_modules')) {
  75. return id.toString().split('node_modules/')[1].split('/')[0].toString()
  76. }
  77. },
  78. // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
  79. entryFileNames: 'js/[name].[hash].js',
  80. // 用于命名代码拆分时创建的共享块的输出命名
  81. // chunkFileNames: 'js/[name].[hash].js',
  82. // 用于输出静态资源的命名,[ext]表示文件扩展名
  83. assetFileNames: '[ext]/[name].[hash].[ext]',
  84. // 拆分js到模块文件夹
  85. chunkFileNames: (chunkInfo) => {
  86. const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
  87. const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
  88. return `js/${fileName}/[name].[hash].js`;
  89. },
  90. }
  91. }
  92. },
  93. css: {
  94. preprocessorOptions: {
  95. less: {
  96. javascriptEnabled: true
  97. }
  98. },
  99. postcss: {
  100. plugins: [usePxtovw]
  101. }
  102. }
  103. }
  104. })