记录VITE Vue3开发需要的一些常用插件

废话不多说，直接开始

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

暂时就这么多吧，欢迎补充，如果不对的地方欢迎大佬指点
以下是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时去除logterserOptions: {compress: {drop_console: true,drop_debugger: true,},},},
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！