vite下部分插件使用

1、vite-plugin-vue-setup-extend

解决vue3下 script setup语法糖 下 ，手动设置组件name不方便的问题

npm i vite-plugin-vue-setup-extend -D

在文件vite.config.ts中

import setupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
  plugins: [
    ...
    setupExtend()
  ],
});

2、unplugin-auto-import

实现vue函数的自动导入,这样如ref, computed，watch等就不用手动导入了

 npm i unplugin-auto-import -D

在文件vite.config.ts中

import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        {
          vuex: ['useStore']
        }
      ],
      resolvers: [],
      dts: false
    }),
  ],
});

当前无效与eslint冲突，如果直接使用依然会报错
这里采用了全局eslint还需安装npm i eslint-plugin-auto-import -D
顾最终配置如下
在vite.config.ts文件中

export default ({ mode }) => {
  return defineConfig({
    plugins: [
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/ // .md
        ],
        imports: [
          'vue',
          'vue-router',
          {
            vuex: ['useStore']
          }
        ],
        resolvers: [ElementPlusResolver()],
        dts: './auto-imports.d.ts',
        // eslint报错解决
        eslintrc: {
          // 此处为true运行后会生成.eslintrc-auto-import.json  auto-imports.d.ts文件
          enabled: true, // 此处第一次运行使用true,之后改为false
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        }
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
    ],
  });
};

在.eslintrc.js文件中

  extends: [
    ...
    './.eslintrc-auto-import.json'
  ],

在tsconfig.json文件中

  compilerOptions: [
    ...
    "types": ["element-plus/global"]
  ],
"include": [..., "auto-imports.d.ts"],

3、unplugin-vue-components

实现vue组件库的自动按需导入,这样就不用手动导入了

npm i unplugin-vue-components -D

在文件vite.config.ts中

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        {
          vuex: ['useStore']
        }
      ],
      resolvers: [ElementPlusResolver()],
      dts: false
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
  ]
});

4、vite-plugin-compression

静态资源压缩

npm i vite-plugin-compression -D

在文件vite.config.ts中

// 静态资源压缩
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
  plugins: [
    ...
    viteCompression({
      verbose: true,
      disable: false, // 不禁用压缩
      deleteOriginFile: false, // 压缩后是否删除原文件
      threshold: 10240, // 压缩前最小文件大小
      algorithm: 'gzip', // 压缩算法
      ext: '.gz' // 文件类型
    })
  ],
});

5、rollup-plugin-visualizer

打包分析,可视化并分析构建包，查看哪些模块占用空间大小，以及模块的依赖关系

npm i rollup-plugin-visualizer -D

在文件vite.config.ts中

import visualizer from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins: [
    ...
    visualizer({
        // 打包后自动打开分析报告
        open: true
      })
  ],
});