解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页或者page not found的问题

最新推荐文章于 2025-04-10 23:25:18 发布

小余童鞋11

最新推荐文章于 2025-04-10 23:25:18 发布

阅读量1k

点赞数 10

文章标签： vue.js html 前端

本文链接：https://blog.youkuaiyun.com/Little_Fishs/article/details/144374450

版权

前言

默认情况下，使用 npm run build 打包后的 index.html 无法直接访问，需要nginx转发或使用node启用简单http serve等方式实现。
实际开发中，有时需临时打开前端项目，若可以直接打开打包后的文件，对某些场景下他人简单使用或调试较为方便。

实现

确保vue-router模式为 hash 模式
修改vue.config.js中publicPath为 ./ 即可
若index.html有文件的引用，修改为正确（相对）路径即可

router.js

const router = new VueRouter({
  mode: "history",// 注释该行即可，默认使用 hash 模式
  base: process.env.BASE_URL,
  routes,
});

vue.config.js

module.exports = {
  // 根路径 默认使用/ vue cli 3.3+ 弃用 baseUrl
  publicPath: '/' // 此处改为 './' 即可
}

Tips：

vue cli 默认不会生成vue.config.js，根目录下手动创建即可
vue下webpack简单配置可参考文章 vue中webpack简单配置

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="./favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./script/SkeyeWebPlayer_2.0.1.min.js"></script>
  </head>
  <body>
    ......
  </body>
</html>

tip: 具体html的修改根据实际情况而定，以上是我的项目修改地方：
link中的href在这里插入代码片属性地址需要从绝对路径改为相对路径"./favicon.ico"；
引入的SkeyeWebPlayer_2.0.1插件，也需要改为相对地址“./script/SkeyeWebPlayer_2.0.1.min.js”