vue-解决项目打包index页面空白详情方案

问题描述

使用npm run build打包项目之后,dist文件夹下的index.html页面出现空白的情况.
排除写代码时路径不正确的情况

解决方法:

1.修改在项目目录下的config文件夹下的index.js

找到build这一块,assetsPublicPath:’/‘更改为’./’
**注意是多加了一个点 **

2.去掉路由history模式

默认是hash,如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源

这个时候可以看到自己的index.html有内容了,但是可能一些背景图片看不到
所以要把静态资源的路径配置正确

3.添加静态资源路径

在build文件夹下找到utils.js 并找到这一块,添加publicPath: '../../'

这样就可以看到完整的index.html页面了.

vue3版本

在根目录下添加vue.config.js文件
修改路径配置
publicPath:"./"
(前提要把router的跳转模式改成hash)

// mode: ‘history’, 要注释掉