Vue-cli创建的Vue3项目构建后无法正常运行求助

问题原因 #

直接用浏览器打开本地dist/index.html时，使用的是file://协议，而默认构建生成的资源路径是绝对路径（以/开头），浏览器会将其解析为本地文件系统的根目录（比如/C:/），导致找不到对应的JS、CSS等资源，从而出现ERR_FILE_NOT_FOUND错误。

解决方案 #

方案1：修改构建配置为相对路径 #

在项目根目录创建vue.config.js文件，添加以下配置：

module.exports = {
  publicPath: './'
}

然后重新执行构建命令：

npm run build

构建完成后再打开dist/index.html，资源路径会变为相对路径，就能正常加载。

方案2：使用本地HTTP服务器打开dist文件夹 #

直接用本地服务器托管dist目录，模拟网站环境：

1. 全局安装serve工具（如果没装过）：

npm install -g serve

2. 运行命令托管dist目录：

serve dist

3. 按照控制台提示的地址（比如http://localhost:3000）在浏览器访问，即可正常运行项目。

附原错误信息：
"Failed to load resource: net::ERR_FILE_NOT_FOUNDUnderstand this error
app.4a6fa159.js:1
Failed to load resource: net::ERR_FILE_NOT_FOUNDUnderstand this error
app.2cf79ad6.css:1
Failed to load resource: net::ERR_FILE_NOT_FOUNDUnderstand this error
/C:/favicon.ico:1
Failed to load resource: net::ERR_FILE_NOT_FOUND"

内容的提问来源于stack exchange，提问作者juliano_regis