Vue项目打包，如何双击index.html即可静态访问？

1.问题描述

• 我们前端在开发完成之后，总会在通过npm run build进行打包，并且可以通过vsCode的Go Live或者启动node服务进行启动查看，再或者直接发布到线上；但是却不能通过双击打包内的index.html 来进行打开。

2.原因描述

这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。打开index.html可以发现，css和js文件的引用使用的是绝对路径，例如：<link href=/css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，对本地磁盘来说，/指向磁盘根目录，找不到引用的文件,所以我们需要将路径改为<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，这种方式。

3.解决方案将绝对路径改为相对路径

3.1 可以选择手动将index.html中所有引用资源的地方全部改成相对路径，如：<link href=./css/chunk-00d5eabc.f78fa75d.css rel=prefetch>或<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>
3.2 修改vue.config.js

module.exports = {
    // publicPath: './',  // 基本路径
    // assetsDir: 'static', // 放置静态资源的目录
    // indexPath: 'index.html', // html 的输出路径
    publicPath: './' ,
}

此时再运行npm run build打包后，打开dist/index.html发现所有资源的引用形式已经变为相对路径：<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，此时可以双击index.html在浏览器中正常访问了！
3.3 提示注意

• 该种方式自能在vue-router的默认hash模式下，如果是history,则还是不行。

const router = new VueRouter({
  mode:  'hash' ，
  routes: [],
})

• 如果您在项目中做了分包处理，也尽量避免

5.文章参考

感谢举杯邀明月：三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
感谢静心安静读书：Vue项目打包，如何双击index.html即可静态访问？