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即可静态访问？
