vite 基础配置

vite 基础配置

vite.config.js 的基本配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
	// 构建配置
  build: {
		 // 构建后的 js 所在的目录 
     assetsDir: "",
  },
	// 开发或生产环境服务的公共基础路径 这个相当于 vue 中的 publicPath
  base: "./",
  resolve: {
		// @ 映射 到 src 路径下
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

其中在配置 映射的时候 注意要在 tsconfig.json 中配置 paths

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    // 严格模式
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    // src 跟路径映射
    "paths": {
      "@/*": ["src/*"]
    }
  },
  // 检查文件
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  // 排除文件
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

可以参考 这里

可以参考 这里