Vite + Vue3 + Ts 打包生成的index.html页面显示空白？？？

问题描述

Vite + Vue3 + Ts 打包生成的 index.html 打开之后显示空白，控制台报如下错误：

解决办法

方法一：

如果已经 npm run build ，则可以手动修改 index.html 中路径的问题：没改之前路径直接就是 / static / js / …… 这样的写法是找不到对应的文件的，故而显示不了页面；因此可以在 / 前面加上 . 即可。

方法二：

如果还没 npm run build ，则可以先修改 vite.config.ts 里面的内容，加上 base:"./" 然后再打包也可以显示页面。

小tip

1. 本地双击打包之后的 index.html 是没有办法打开页面的，因为打包之后下载下来的是静态资源。
2. 可以在 VSCode 下载一个插件 Live Server （如下图）然后用其运行打包后的 index.html 是可以打的开的；如果不想用插件，利用 node 或者 nginx 都可以实现正常运行 vue 项目。