解决vue打包项目后点击dist文件夹中的index.html网页显示一片空白的问题

问题描述:

vue项目完成后,用npm run build 打包项目后,出现dist文件夹,点击dist文件夹下的index.html页面出现一片空白。

在这里插入图片描述


原因分析:

没有修改config配置文件,直接打包,系统默认的是’/’(根目录),而不是’./’(当前目录),从而导致路径不对,页面加载不出来。


解决方案:

针对vue-cli3.0以下版本的可以直接将config/index.js文件的assetsPublicPath: ‘/’;改为assetsPublicPath: ‘./’; 然后再重新打包一次就可以了。

在这里插入图片描述
对于vue-cli3.0及以上版本没有config配置文件的。需要自己在项目的根目录下手动建一个配置文件并添上以下代码:然后在重新打包一次就可以了。

module.exports = {
  publicPath: './'
}

在这里插入图片描述
你以为这样就结束了吗?也许此时的你可以,但是小编我并没有结束!!!

经过上面一番操作后,我点击导航栏它是这个样子的:
在这里插入图片描述
百度得知是我开发时路由的方式选的不同,才导致这样。
vue-router总共有三种模式:https://blog.csdn.net/lcj529/article/details/108740607这篇博客里面讲了这三种路由方式。

具体解决办法:将router中的index.js 中的mode: "history"注释掉,然后再重新打包即可。
在这里插入图片描述
最后附上这篇博客,罗列的更全面:
https://www.cnblogs.com/nuonuo-D/p/10516394.html

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页