vite常用插件总结

rollup-plugin-remove-others-console

这个插件是我自己开发的，在生产环境中可以根据 git 作者信息移除非自己的 console 语句，无任何配置负担，优化开发体验～
安装

1
npm install rollup-plugin-remove-others-console --save-dev

配置

1
2
3
4
5
6
import { defineConfig } from 'vite';
import removeConsole from 'rollup-plugin-remove-others-console';

export default defineConfig({
  plugins: [removeConsole()],
});

vite-tsconfig-paths

安装

1
npm install vite-tsconfig-paths --save-dev

配置

1
2
3
4
5
6
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
});

配置tsconfig.json

1
2
3
4
5
6
7
8
    {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["src/utils/*"]
    }
  }
}

页面引用

1
import { formatDate } from '@utils/date';

vite-aliases

根据项目结构自动生成模块别名，减少手动配置的麻烦。
安装

1
npm install vite-aliases --save-dev

配置

1
2
3
4
5
6
import { defineConfig } from 'vite';
import aliases from 'vite-aliases';

export default defineConfig({
  plugins: [aliases()],
});

引用方式

1
2
import Button from '@components/Button.vue';
import { format } from '@utils/format';

vite-plugin-vconsole

集成 VConsole，帮助开发者在移动设备上进行调试。
安装

1
npm install vite-plugin-vconsole --save-dev

配置

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'vite';
import vconsole from 'vite-plugin-vconsole';

export default defineConfig({
  plugins: [
    vconsole({
      entry: 'src/main.ts',
      enabled: process.env.NODE_ENV === 'development',
    }),
  ],
});

vite-plugin-mock-server

提供 Mock 服务器，支持 TypeScript 和 JavaScript 编写 Mock API，支持热更新和 express.js 中间件。
安装

1
npm install vite-plugin-mock-server --save-dev

配置

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'vite';
import mockServer from 'vite-plugin-mock-server';

export default defineConfig({
  plugins: [
    mockServer({
      mockRootDir: './mock',
      urlPrefixes: ['/api/'],
    }),
  ],
});

vitawind

自动安装和配置 Tailwind CSS，支持 JIT 模式，简化样式开发。
安装

1
npm install vitawind --save-dev

配置

1
2
3
4
5
6
import { defineConfig } from 'vite';
import vitawind from 'vitawind';

export default defineConfig({
  plugins: [vitawind()],
});

vite-plugin-restart

监控指定文件或模式的变化，自动重启 Vite 服务器。

1
npm install vite-plugin-restart --save-dev

配置

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from 'vite';
import restart from 'vite-plugin-restart';

export default defineConfig({
  plugins: [
    restart({
      restart: ['vite.config.ts', 'src/config/**/*'],
    }),
  ],
});

vite-plugin-tips

在页面上显示更详细的开发服务器状态提示，提升开发体验。
安装

1
npm install vite-plugin-tips --save-dev

配置

1
2
3
4
5
6
import { defineConfig } from 'vite';
import tips from 'vite-plugin-tips';

export default defineConfig({
  plugins: [tips()],
});

unplugin-auto-import

自动按需导入 API，支持 Vite、Webpack 等，减少手动导入的繁琐。
安装

1
npm install unplugin-auto-import --save-dev

配置

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
});