vue3 项目配置路径别名报错Error: Dynamic require of "path" is not supported

781 阅读1分钟

vite 报错提示:

Dynamic require of "path" is not supported

错误原因:

vite版本此时已经不支持commonJS的方法导入path

"vite": "^4.1.0"

要使用es6语法

vite.config.js 修改前:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置 unplugin-auto-import 插件
    AutoImport({
      import: ["vue", "vue-router"],
    }),
  ],
  resolve: {
    // 配置路径别名,
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

vite.config.js 修改后:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

// const path = require("path");
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置 unplugin-auto-import 插件
    AutoImport({
      import: ["vue", "vue-router"],
    }),
  ],
  resolve: {
    // 配置路径别名,
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

错误修复成功~