Svelte（非SvelteKit）项目npm run build后Index.html显示空白页

问题原因 #

直接点击打开dist目录里的index.html时，浏览器使用的是file://本地文件协议，但生成的HTML中资源引用采用绝对路径（比如/assets/index-xxx.js）。本地文件系统不存在网站根目录，浏览器无法找到这些资源，导致页面加载失败显示空白。

解决方案 #

方案1：修改Vite配置，改用相对路径打包 #

在项目根目录的vite.config.js（若为TS项目则是vite.config.ts）中添加base配置，设置为./：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  base: './' // 新增该行配置
})

重新执行npm run build，生成的dist目录中，HTML的资源引用会变为相对路径（比如./assets/index-98081fa1.js），此时双击index.html即可正常显示页面。

方案2：用本地静态服务器托管dist目录 #

若不想修改配置，可通过本地服务器加载dist目录：

• 使用Node.js的serve工具：
  1. 全局安装工具：npm install -g serve
  2. 进入dist目录：cd dist
  3. 启动服务器：serve
     随后在浏览器访问提示的地址（如http://localhost:3000）即可正常查看页面。
• 使用Python内置服务器（需已安装Python）：
  • Python 3环境：在dist目录执行python -m http.server 8000
  • Python 2环境：在dist目录执行python -m SimpleHTTPServer 8000
    访问http://localhost:8000即可加载页面。

验证方式 #

修改配置重新build后，查看dist/index.html的资源引用，应变为类似以下的相对路径格式：

<script type="module" crossorigin src="./assets/index-98081fa1.js"></script>
<link rel="stylesheet" href="./assets/index-65be3931.css">

此时双击打开index.html就能正常加载资源，显示页面内容。

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