vite.config.ts 2.8 KB

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