vite 前端工程化配置 Snippets

配置@符号映射为项目根目录

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

如果使用 ts，添加 ts 路径设置

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

resolve.alias选项参考vite resolve.alias；

URL是 Node.js url 模块下的一个类，用于解析 URL，参考node:url；

fileURLToPath是 Node.js url 模块的原生方法，参考fileURLToPath；

import.meta.url是 ESM 模块的元数据信息，url 属性是模块的路径，参考MDN import.meta；

compilerOptions属性用来定制 TypeScript 编译行为，参考compilerOptions.paths；

打包时将不同的包分为多个 chunk

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          lodash: ['lodash-es'],
          vueuse: ['@vueuse/core'],
          axios: ['axios'],
          dragger: ['vue-draggable-plus'],
          ant: ['@ant-design/icons-vue', 'ant-design-vue'],
        },
      },
    },
  },
  ...
});

rollupOptions.output.manualChunks选项参考manualchunks；

preitter 配置

module.exports = {
  $schema: "https://json.schemastore.org/prettierrc",
  semi: true, // 在语句末尾需要加分号
  useTabs: false, // 不使用制表符缩进行，而是使用空格缩进行
  tabWidth: 2, // 使用两个空格缩进行
  singleQuote: true, // 使用单引号
  printWidth: 250, // 单行长度
  bracketSpacing: true, // 在单行对象中，在左右保留一个空格
  trailingComma: "all", // 尽可能都加尾随逗号
};