Vite开发Vue项目时public目录文件解析错误解决方案

项目目录结构如上图所示。

基础配置 #

项目vite.config.ts配置代码如下：

import { defineConfig } from "vite"
import { fileURLToPath, URL } from "url"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

报错现象 #

启动dev开发服务器时出现如下报错：

具体触发场景：

• 项目/public/preview目录下存在多个子文件夹，每个子文件夹内包含独立的index.html文件，以及对应assets目录下存储的.js等静态资源
• 这些文件并未在主应用中引入，依然触发了上述报错
• 初步排查判断：Vite将资源查找路径错误指向了/src/assets目录，而非子页面自身目录下的assets文件夹

/public/preview目录下所有html文件的初始代码格式如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

<meta name="theme-color" content="#fff">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>Test</title>

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="icon" href="icons/favicon.png">

<style>
</style>
<!-- built styles file will be auto injected -->
<script type="module" crossorigin src="assets/index.4277377f.js"></script>
<link rel="stylesheet" href="assets/index.4ceaebd1.css">
</head>

<body>
 <div id="app"></div>
 </body>

 </html>

报错原因 #

HTML中使用assets/xxx这类省略前缀的路径写法时，Vite开发服务器会默认从站点根路径解析资源地址，不会相对于当前HTML文件所在目录查找资源，因此会误去项目根目录（含配置的@对应的src目录）下查找assets资源，找不到对应文件就抛出404报错。

修复方案 #

修改子页面内所有静态资源的引用路径，在路径开头添加./前缀，明确指定资源相对于当前HTML文件所在目录查找即可解决问题。

• 原错误写法示例：src="assets/index.4277377f.js"
• 修复后正确写法：src="./assets/index.4277377f.js"

注意同目录下的CSS、图标等其他静态资源引用也需要同步补全./前缀，例如将href="assets/index.4ceaebd1.css"改为href="./assets/index.4ceaebd1.css"，避免同类报错。

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