vite.config.ts 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { defineConfig, ConfigEnv, UserConfig, loadEnv } from 'vite'
  2. import path from 'path'
  3. // vite.config.ts中无法使用import.meta.env 所以需要引入
  4. import vue from '@vitejs/plugin-vue'
  5. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  6. // 增加 vue文件 script name值
  7. import vueSetupExtend from 'vite-plugin-vue-setup-extend'
  8. // 生产gz文件
  9. import viteCompression from 'vite-plugin-compression'
  10. import topLevelAwait from 'vite-plugin-top-level-await';
  11. // 按需加载
  12. // import AutoImport from 'unplugin-auto-import/vite'
  13. // import Components from 'unplugin-vue-components/vite'
  14. //import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  15. function resolve(dir) {
  16. return path.join(__dirname, '.', dir)
  17. }
  18. // https://vitejs.dev/config/
  19. export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  20. return {
  21. plugins: [vue(),
  22. topLevelAwait({
  23. promiseExportName: '__tla',
  24. promiseImportName: (i) => `__tla_${i}`,
  25. }),
  26. vueSetupExtend(),
  27. // AutoImport({
  28. // resolvers: [ElementPlusResolver()],
  29. // }),
  30. // Components({
  31. // resolvers: [ElementPlusResolver()],
  32. // }),
  33. // * 使用 svg 图标
  34. createSvgIconsPlugin({
  35. // 指定需要缓存的图标文件夹
  36. iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
  37. // 指定symbolId格式
  38. symbolId: 'icon-[dir]-[name]',
  39. }),
  40. // gzip压缩 生产环境生成 .gz 文件
  41. mode === 'production' && viteCompression({
  42. verbose: true,
  43. disable: false,
  44. threshold: 10240,
  45. algorithm: 'gzip',
  46. ext: '.gz',
  47. }),
  48. ],
  49. css: {
  50. preprocessorOptions: {
  51. scss: {
  52. additionalData: `@use "./src/styles/index.scss" as *;`
  53. }
  54. }
  55. },
  56. // 配置别名
  57. resolve: {
  58. alias: {
  59. '@': resolve('src'),
  60. 'static': resolve('public/static'),
  61. },
  62. // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
  63. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  64. },
  65. //启动服务配置
  66. server: {
  67. // 服务器主机名,如果允许外部访问,可设置为 "0.0.0.0" 也可设置成你的ip地址
  68. host: '0.0.0.0',
  69. port: 8080,
  70. open: true,
  71. https: false,
  72. cors: true,
  73. // 代理跨域(模拟示例)
  74. // proxy: {
  75. // "/api": {
  76. // target: "http://192.168.123.216:8001", // easymock
  77. // changeOrigin: true,
  78. // rewrite: path => path.replace(/^\/api/, "")
  79. // }
  80. // }
  81. },
  82. // 生产环境打包配置
  83. //去除 console debugger
  84. // esbuild: {
  85. // pure:mode==='production' ? ["console.log", "debugger"] : []
  86. // },
  87. build: {
  88. minify: "terser",
  89. outDir: 'dist',
  90. assetsDir: 'assets',
  91. sourcemap: false,
  92. terserOptions: {
  93. compress: {
  94. drop_console: true,
  95. drop_debugger: true,
  96. },
  97. },
  98. },
  99. define: {
  100. 'process.env': process.env
  101. }
  102. }
  103. })