table-pro

演示：

提示：

直接打开 Vue（或 Vite/Webpack）打包后的 dist 目录中的 index.html 文件，在浏览器中显示空白，是前端开发中一个非常常见的问题。

根本原因是：打包后生成的 JS、CSS 文件通常使用的是绝对路径（例如 /assets/index.xxxxxx.js）。当你双击本地文件打开时（file:/// 协议），浏览器会尝试在本地磁盘的根目录（如 C:/）寻找 /assets/ 文件夹，这显然不存在，因此资源加载失败，页面空白。

解决方法就是使用一个本地 HTTP 服务器（比如 serve）来运行 dist 目录，这样所有资源路径都能被正确解析。

对于 Vite 项目：

// vite.config.js
export default defineConfig({
  base: './', // 使用相对路径
  // ... 其他配置
})

对于 Vue CLI (Webpack) 项目：：

// vue.config.js
module.exports = {
    publicPath: './', // 使用相对路径
    // ... 其他配置
}