记录VITE Vue3开发需要的一些常用插件_vue+vite 常用的脚本

废话不多说，直接开始

1. nprogress （网页加载进度条）
2. axios(promise 的网络请求库)
3. pinia(状态管理库)
4. pinia-plugin-persistedstate（pinia常态化插件）
5. moment（日期处理类库）
6. lodash （js函数工具库）
7. sass（懂得都懂）
8. vite-plugin-imagemin（图片压缩）
9. @vitejs/plugin-legacy （兼容老板浏览器）
10. ts-md5 (ts版加密库还有一种js-md5)
11. vite-plugin-compression （打包压缩）
12. @types/node （node库）
13. unplugin-auto-import unplugin-vue-components （自动引入）
14. Element Plus / naiveui (看个人喜好或公司需求ui库)

下面是npm命令，但是有些库npm在国内安装会报错，建议换yarn

npm install --save nprogress sass axios pinia qs lodash moment @types/node unplugin-auto-import unplugin-vue-components @element-plus/icons-vue element-plus ts-md5 pinia-plugin-persistedstate vite-plugin-compression  @vitejs/plugin-legacy vite-plugin-imagemin -D
1

暂时就这么多吧，欢迎补充，如果不对的地方欢迎大佬指点
以下是vite.config.ts 文件详情

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from 'vite-plugin-compression'
import legacyPlugin from '@vitejs/plugin-legacy'
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  plugins: [
    vue(),
    // 自动导入ui库
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // 开启gzip压缩
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    // 兼容旧版浏览器
    legacyPlugin({
      targets: ['chrome 52'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
      ]
    })
  ],
  // 打包优化
  build: {
    minify: 'terser',
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    // build时去除log
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82