vue3使用import “@/...”表示src路径

在vue2中引入资源或文件习惯使用Vue中import '@... @ 等价于 /src 这个目录，在vue3中直接使用import “@/...” 的方式会报错，例如下图：

上图中，我在main.js文件中import引入资源，期望查找路由 src/router的文件，结果报错找不到。 为了解决这个方法需要在项目文件下vite.config.js添加下面代码：

import { defineConfig } from "vite";
// 确保导入了 path 模块 
import { resolve } from "path";
// 导入 Node.js 的 path 模块 import { defineConfig } from 'vite' 
import vue from "@vitejs/plugin-vue";

// 使用 path.resolve 定义别名 
const pathResolve = (dir) => resolve(__dirname, dir);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": pathResolve("./src"),
    },
  },
});

这样就可以使用 “@/...”表示src路径。

// 路由
import router from "@/router";