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 } 的数组。

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

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

// vite.config.js
import { 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