vite.config.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { defineConfig } from 'vite'
  2. import reactRefresh from '@vitejs/plugin-react-refresh'
  3. import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'
  4. import legacyPlugin from '@vitejs/plugin-legacy'
  5. import visualizer from 'rollup-plugin-visualizer'
  6. import path from 'path'
  7. // 区分环境设置。用来打包和测试环境发布的相关
  8. // const env = process.argv[process.argv.length - 1]
  9. // const base = config[env]
  10. // 关联cdn相关配置
  11. // 官方提供的打包按需
  12. import vitePluginImp from 'vite-plugin-imp'
  13. // import _ from 'lodash-es'
  14. // import $ from 'jquery'
  15. // https://vitejs.dev/config/
  16. export default defineConfig({
  17. // base: base.cdn
  18. base: './', // index.html文件所在位置
  19. root: './', // js导入的资源路径,src
  20. define: {
  21. 'process.env.REACT_APP_IS_LOCAL': "'true'",
  22. // 'globalThis': {
  23. // // _: _,
  24. // jquery: $,
  25. // $: $
  26. // },
  27. 'global': 'globalThis'
  28. },
  29. build: {
  30. minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
  31. manifest: false, // 是否产出maifest.json
  32. sourcemap: false, // 是否产出soucemap.json
  33. outDir: 'dist', // 产出目录
  34. assetsInlineLimit: 1024,
  35. cssCodeSplit: true,
  36. rollupOptions: {
  37. //按需加载
  38. plugins: [visualizer()],
  39. output: {
  40. manualChunks(id) {
  41. if (id.includes('node_modules')) {
  42. return id.toString().split('node_modules/')[1].split('/')[0].toString()
  43. }
  44. }
  45. }
  46. }
  47. },
  48. plugins: [
  49. reactRefresh(),
  50. legacyPlugin({
  51. targets: [
  52. 'Android > 39',
  53. 'Chrome >= 60',
  54. 'Safari >= 10.1',
  55. 'iOS >= 10.3',
  56. 'Firefox >= 54',
  57. 'Edge >= 15'
  58. ]
  59. }),
  60. dynamicImportVars({
  61. include: ['tsx'],
  62. warnOnError: true
  63. }),
  64. vitePluginImp({
  65. libList: [
  66. // 暂时还没有
  67. {
  68. libName: 'antd',
  69. style: (name) => `antd/lib/${name}/style/index.less`
  70. }
  71. ]
  72. })
  73. ],
  74. css: {
  75. preprocessorOptions: {
  76. scss: {
  77. additionalData: `$injectedColor: orange;`
  78. },
  79. less: {
  80. javascriptEnabled: true
  81. }
  82. },
  83. modules: {
  84. // 样式小驼峰转化,
  85. //css: goods-list => tsx: goodsList
  86. localsConvention: 'camelCase'
  87. }
  88. },
  89. esbuild: {
  90. // jsxFactory: 'h',
  91. // jsxFragment: 'Fragment'
  92. },
  93. resolve: {
  94. alias: {
  95. '~': path.resolve(__dirname, './ '), // 根路径
  96. '@': path.resolve(__dirname, 'src'),
  97. 'components': path.resolve(__dirname, 'src/components')
  98. },
  99. extensions: ['.js', '.ts', '.tsx', '.jsx', '.mjs']
  100. },
  101. server: {
  102. proxy: {
  103. // 字符串简写方式
  104. //'/apit': 'http://localhost:9000',
  105. // 选项写法
  106. '/api': {
  107. target: 'http://127.0.0.1:8075', // 所要代理的目标地址
  108. // target: 'http://192.168.31.7:8075', // 所要代理的目标地址
  109. rewrite: (path) => path.replace(/^\/api/, ''), // 重写传过来的path路径,比如 `/api/index/1?id=10&name=zs`(注意:path路径最前面有斜杠(/),因此,正则匹配的时候不要忘了是斜杠(/)开头的;选项的 key 也是斜杠(/)开头的)
  110. changeOrigin: true // true/false, Default: false - changes the origin of the host header to the target URL
  111. }
  112. },
  113. hmr: { overlay: false }
  114. }
  115. })
  116. // export default defineConfig(({ command, mode }) => {
  117. // if (command === 'serve') {
  118. // return {
  119. // // serve 独有配置
  120. // }
  121. // } else {
  122. // return {
  123. // // build 独有配置
  124. // }
  125. // }
  126. // })