前言
通过解决一个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 } 的数组。
当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
通过定义别名，可以在导入语句中使用简短的别名代替长路径，提高代码可读性和可维护性
// vite.config.jsimport { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'export default defineConfig(({ command, mode }) => {return {resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}}})了解几个前置知识：
URL
new URL(input[,base])该方法新建一个URL实例，便于对URL进行解析
参数：
input：string类型，input URL，要解析的绝对或相对URL
base：string类型，base URL，当input是绝对URL，base将被忽略。当input是相对URL，则解析base。如果base不是字符串，则首先将其转换为字符串。
fileURLToPath
url.fileURLToPath( url )参数：
该函数接受单个参数：要解析的URL对象或字符串
返回值：返回一个经完全解析的符合特定平台的文件路径的字符串。
import.meta.url
import.meta.url 表示浏览器中模块的绝对URL或Node.js中的绝对路径（前缀为file:// ）
import.meta 是给JavaScript模块暴露特定上下文的元数据属性的对象，它包含了这个模块的信息。import.meta 对象是由ECMAScript实现的，它带有一个null的原型对象。这个对象可以扩展，并且它的属性都是可写，可配置和可枚举的。
示例
这里有一个 my-module.js 模块
<script type="module" src="my-module.mjs"></script>可以通过 import.meta 对象获取这个模块的元数据信息
console.log(import.meta); // { url: "file:///home/user/my-module.mjs" }它返回一个带有url属性的对象，指明该模块的基本URL。也可以是外部脚本的URL，还可以是内联脚本所属文档的URL