vite.config.ts 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. // vite.config.ts
  2. import { defineConfig, loadEnv, type PluginOption } from 'vite'
  3. import path from 'path'
  4. import createVitePlugins from './vite/plugins'
  5. // 环境变量类型定义(可根据实际变量扩展)
  6. interface ViteEnv {
  7. VITE_APP_ENV?: 'production' | 'development'
  8. VITE_BUILD_COMPRESS?: string
  9. // ... 其他变量
  10. }
  11. const baseUrl = 'http://localhost:8080' // 后端接口地址
  12. // https://vitejs.dev/config/
  13. export default defineConfig(({ mode, command }) => {
  14. // 加载环境变量并断言为自定义类型
  15. const env = loadEnv(mode, process.cwd()) as unknown as ViteEnv
  16. const { VITE_APP_ENV } = env
  17. // 是否为生产构建
  18. const isBuild = command === 'build'
  19. return {
  20. // 基础路径(可根据实际需要调整)
  21. base: VITE_APP_ENV === 'production' ? '/' : '/',
  22. plugins: [...(createVitePlugins(env, isBuild) as PluginOption[])],
  23. resolve: {
  24. tsconfigPaths: true,
  25. alias: {
  26. '~': path.resolve(__dirname, './')
  27. },
  28. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  29. },
  30. // Vite 8 构建配置(使用 rolldownOptions 替代 rollupOptions)
  31. build: {
  32. sourcemap: isBuild ? false : 'inline',
  33. outDir: 'dist',
  34. assetsDir: 'assets',
  35. chunkSizeWarningLimit: 2000,
  36. // ✅ 使用 rolldownOptions(兼容 Rollup 选项,但推荐使用新命名)
  37. rolldownOptions: {
  38. output: {
  39. // 命名规则与原来相同,Rolldown 支持这些配置
  40. chunkFileNames: 'static/js/[name]-[hash].js',
  41. entryFileNames: 'static/js/[name]-[hash].js',
  42. assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
  43. }
  44. }
  45. },
  46. server: {
  47. port: 80,
  48. host: true,
  49. open: true,
  50. proxy: {
  51. '/dev-api': {
  52. target: baseUrl,
  53. changeOrigin: true,
  54. rewrite: p => p.replace(/^\/dev-api/, '')
  55. }
  56. }
  57. },
  58. // CSS 配置(保持不变)
  59. css: {
  60. postcss: {
  61. plugins: [
  62. {
  63. postcssPlugin: 'internal:charset-removal',
  64. AtRule: {
  65. charset: atRule => {
  66. if (atRule.name === 'charset') {
  67. atRule.remove()
  68. }
  69. }
  70. }
  71. }
  72. ]
  73. }
  74. }
  75. }
  76. })