Vue编译报错 “Failed to resolve import “@/router“ from “src\main.js“. Does the file exist ? “ 问题修复

前言

通过解决一个Vue编译报错，我们将学习构建工具中关于解析（resolve）别名（alias）的选项

背景

前端项目使用@简化import文件路径，编译打包时遇到报错 "Failed to resolve import “@/router” from “src\main.js”. Does the file exist ? "

解决方案

检查构建工具的配置文件 vite.config.js ，确保别名 @ 映射到src目录

alias：

resolve.alias
类型：Record<string, string> | Array<{ find: string | RegExp, replacement: string }>
将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组。

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

通过定义别名，可以在导入语句中使用简短的别名代替长路径，提高代码可读性和可维护性