4 - 《vite常用配置和插件》

常用配置

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "path";

export default defineConfig({
  plugins: [vue(), vueJsx()],
  //静态资源服务的文件夹
  publicDir: "public",
  base: './',
  //静态资源处理
  assetsInclude: "",
  //控制台输出的级别 info 、warn、error、silent
  logLevel: "info",
  // 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息
  clearScreen: true,
  //本地运行配置，以及反向代理配置
  server: {
    host: true, // 默认 "localhost" 可以设置为'0.0.0.0' or true
    https: false,//是否启用 http 2
    cors: true,//为开发服务器配置 CORS , 默认启用并允许任何源
    open: true,//服务启动时自动在浏览器中打开应用
    port: 3000, // 端口
    strictPort: false, //设为true时端口被占用则直接退出，不会尝试下一个可用端口
    force: true,//是否强制依赖预构建
    hmr: false,//禁用或配置 HMR 连接
    // 传递给 chockidar 的文件系统监视器选项
    watch: {
      ignored: ["!**/node_modules/your-package-name/**"]
    },
    /* 设置代理 */
    proxy: {
      "/api": {
        target: "http://jsonplaceholder.typicode.com",
        changeOrigin: true,  // 改变来源
        rewrite: path => path.replace(/^\/api/, "")  // 重写path
      }
    }
  },
  resolve: {
    /* 设置路径别名 */
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    // 情景导出 package.json 配置中的exports字段
    conditions: [],
    /* 使用路径别名时想要省略的后缀名 可以自己 增减 不建议使用 .vue 影响IDE和类型支持 */
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
  css: {
    // 配置 css modules 的行为
    modules: {
      localsConvention: 'camelCase', // 默认只支持驼峰，修改为同时支持横线和驼峰
    },
    //指定传递给 css 预处理器的选项
    preprocessorOptions: {
      scss: {
        charset: false,
      },
      less: {
        charset: false,
      },
    },
    // TODO 构建包含@charset问题 https://github.com/vitejs/vite/issues/5833
    // charset: false,
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            },
          },
        },
      ],
    },
    // css预设的配置
    preprocessorOptions: {
      scss: {
        /* 自动引入全局scss文件 */
        additionalData: {
          `@import "@/assets/scss/variable.scss";
                 @import "@/assets/scss/mixin.scss";
                 @import "@/assets/scss/helper.scss";
                `
      }
    }
  },
  json: {
    //是否支持从 .json 文件中进行按名导入
    namedExports: true,
    //若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好
    stringify: false
  },
  //继承自 esbuild 转换选项，最常见的用例是自定义 JSX
  esbuild: {
    jsxFactory: "h",
    jsxFragment: "Fragment",
    jsxInject: `import Vue from 'vue'`
  },
  //打包配置
  build: {
    target: 'modules', // 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules'  还可设置为 'es2015' 'es2016'等
    outDir: "dist",//指定输出路径
    assetsDir: "assets",//生成静态资源的存放路径
    assetsInlineLimit: 4096, //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
    sourcemap: false, // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件
    chunkSizeWarningLimit: 550, // 单位kb  打包后文件大小警告的限制 (文件大于此此值会出现警告)
    assetsInlineLimit: 4096, // 单位字节（1024等于1kb） 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
    minify: 'terser', // 'terser' 相对较慢，但大多数情况下构建后的文件体积更小。'esbuild' 最小化混淆更快但构建后的文件相对更大。
    write: true, //设置为 false 来禁用将构建后的文件写入磁盘
    emptyOutDir: true, //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    brotliSize: true, //启用/禁用 brotli 压缩大小报告
    chunkSizeWarningLimit: 500,//chunk 大小警告的限制
    // 传递给 Terser 的更多 minify 选项。
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境去除console
        drop_debugger: true, // 生产环境去除debugger
      },
    },
    // 自定义底层的 Rollup 打包配置
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        preview: resolve(__dirname, 'preview/index.html'),
      },
      output: {
        manualChunks: {
          jsonWorker: [`${prefix}/language/json/json.worker`],
          cssWorker: [`${prefix}/language/css/css.worker`],
          htmlWorker: [`${prefix}/language/html/html.worker`],
          tsWorker: [`${prefix}/language/typescript/ts.worker`],
          editorWorker: [`${prefix}/editor/editor.worker`],
        },
      },
      /* 确保外部化处理那些你不想打包进库的依赖 */
      external: ['vue', 'element-plus'],
      output: {
        /* 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 */
        globals: {
          vue: 'Vue',
          'element-plus': 'ELEMENT',
        }
      }
    },
    //@rollup/plugin-commonjs 插件的选项
    commonjsOptions:{},
    //构建的库
    lib: {
      // 打包入口，entry 是必需的，因为库不能使用 HTML 作为入口
      entry: resolve(__dirname, 'src/packages/index.ts'),
      // 暴露的全局变量,并且在 formats 包含 'umd' 或 'iife' 时是必需的
      name:"MyLib",
      // 需要打包的格式 默认 formats 是 ['es', 'umd']，如果使用了多个配置入口，则是 ['es', 'cjs']
      formats: ['es'],
      // 输出的包文件名 默认 fileName 是 package.json 的 name 选项，可以被定义为参数为 format 和 entryAlias 的函数
      fileName: 'index',
    },
  },
  // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包
  optimizeDeps: {
    //检测需要预构建的依赖项
    entries: [],
    //默认情况下，不在 node_modules 中的，链接的包不会预构建
    include: ['axios','@/../lib/vuedraggable/dist/vuedraggable.umd.js'],
    exclude: ['your-package-name'], //排除在优化之外
  },

});

Plugin

名称	描述
@vitejs/plugin-vue	解析vue
@vitejs/plugin-vue-jsx	添加jsx/tsx支持
@vitejs/plugin-legacy	生产构建时提供浏览器支持
vite-plugin-svg-icons	处理和优化svg图标
vite-plugin-vue-images	自动导入图片
vite-plugin-vue-setup-extend	不用写两个script标签，可以直接在script标签上定义name
vite-plugin-mock	mock数据（需要安装mockjs yarn add mockjs）
vite-plugin-pages	根据目录结构自动生成路由
vite-plugin-vue-layouts	layout配置，和vite-plugin-pages搭配使用
vite-plugin-md	使用 Markdown 作为 Vue 组件，在 Markdown 中使用 Vue 组件
vite-plugin-windicss	windicss插件
vite-plugin-inspect	检查 Vite 插件的中间状态。用于调试和创作插件
vite-plugin-imagemin	一个压缩图片资产的vite插件
@intlify/vite-plugin-vue-i18n	多语言配置
@rollup/plugin-commonjs	解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误
rollup-plugin-visualizer	可视化Bundle
unplugin-auto-import	实现自动导入，无需import即可在文件里使用Vue的API
unplugin-vue-components	按需导入组件，可以和ui库搭配使用
unplugin-vue-macros	宏和语法糖的扩展
unplugin-vue-define-options	setup中使用defineOptions宏
unocss	css原子化引擎
vitest	单元测试

use Plugin

import path from 'path'
// 处理vue和jsx
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// svg配置
import viteSvgIcons from 'vite-plugin-svg-icons'

// 处理commjs模块
import commonjs from '@rollup/plugin-commonjs'

// 可视化bundle
import visualizer from 'rollup-plugin-visualizer'

// 处理script setup name
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// 自动导入
import AutoImport from 'unplugin-auto-import/vite'

// 图片导入配置
import ViteImages from 'vite-plugin-vue-images'

// mock配置
import { viteMockServe } from "vite-plugin-mock"

// 自动注册页面配置
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'

// 按需导入组件配置
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// markedown配置
import Markdown from 'vite-plugin-md'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'

// 多语言配置
import VueI18n from '@intlify/vite-plugin-vue-i18n'

// unocss配置
import Unocss from 'unocss/vite'

// 调试vite
import Inspect from 'vite-plugin-inspect'

// 使用宏和语法糖
import VueMacros from 'unplugin-vue-macros/vite';

// 使用windicss
import WindiCSS from 'vite-plugin-windicss';

// 压缩图片
import viteImagemin from 'vite-plugin-imagemin'

// defintOptions
import DefineOptions from 'unplugin-vue-define-options/vite'

export default {
  plugins:[
    vue({
      reactivityTransform:true   // 测试阶段，谨慎开启  $ref
    }),

    vueJsx({}),

    DefineOptions(),

    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    commonjs(),

    // https://github.com/btd/rollup-plugin-visualizer
    visualizer(),

    // https://github.com/vbenjs/vite-plugin-svg-icons
    viteSvgIcons({
      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
      symbolId: 'icon-[dir]-[name]',
      svgoOptions: isBuild
    }),

    // https://github.com/vbenjs/vite-plugin-vue-setup-extend
    VueSetupExtend(),

    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        {
          'vuex': ['useStore']
        }
      ],
      dts: false,   // 不生成.d.ts文件，如果需要生成填写路径，默认根路径
      vueTemplate: true,
    }),

    // https://github.com/sampullman/vite-plugin-vue-images
    ViteImages({
      // Relative paths of image search directories
      dirs: ['src/assets/img'],

      // valid image extensions
      extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'],

      // Override default behavior of name -> image path resolution
      customResolvers: [],

      // Override Regex that searches for variables to replace. MUST include group
      customSearchRegex: '([a-zA-Z0-9]+)',
    });

    // https://github.com/vbenjs/vite-plugin-mock
    viteMockServe({
      mockPath: "mock",
      localEnabled: command === 'serve'  // 不是打包的时候开启
    }),

  // https://github.com/hannoeru/vite-plugin-pages
  Pages({
    extensions: ['vue', 'md'],
  }),

  // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
  Layouts(),

  // https://github.com/antfu/unplugin-vue-components
  Components({
    // allow auto load markdown components under `./src/components/`
    extensions: ['vue', 'md'],
    // allow auto import and register components used in markdown
    include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/components.d.ts',
    resolvers: [ElementPlusResolver()],
  }),

  // https://github.com/antfu/vite-plugin-md
  // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
  Markdown({
    wrapperClasses: markdownWrapperClasses,
    headEnabled: true,
    markdownItSetup(md) {
      // https://prismjs.com/
      md.use(Prism)
      md.use(LinkAttributes, {
        matcher: (link: string) => /^https?:\/\//.test(link),
        attrs: {
          target: '_blank',
          rel: 'noopener',
        },
      })
    },
  }),

  // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
  VueI18n({
    runtimeOnly: true,
    compositionOnly: true,
    include: [path.resolve(__dirname, 'locales/**')],
  }),

  // https://github.com/antfu/unocss
  // see unocss.config.ts for config
  Unocss(),

  // https://github.com/antfu/vite-plugin-inspect
  // Visit http://localhost:3333/__inspect/ to see the inspector
  Inspect(),

  // https://github.com/sxzz/unplugin-vue-macros
   VueMacros({
      plugins: {
        vue: Vue({
          reactivityTransform: true,
        }),
      },
    }),

  // https://github.com/windicss/vite-plugin-windicss
  WindiCSS(),

  // https://github.com/vbenjs/vite-plugin-imagemin
  viteImagemin({
    gifsicle: {
      optimizationLevel: 7,
      interlaced: false,
    },
    optipng: {
      optimizationLevel: 7,
    },
    mozjpeg: {
      quality: 20,
    },
    pngquant: {
      quality: [0.8, 0.9],
      speed: 4,
    },
    svgo: {
      plugins: [
        {
          name: 'removeViewBox',
        },
        {
          name: 'removeEmptyAttrs',
          active: false,
        },
      ],
    },
  }),
  ]
}