摘要：修改完毕后再次打包，页面还是空白页，打开控制台，也没有抱任何错误，查看元素，资源路径也是正确的，如图右侧红框再次陷入崩溃，控制台无任何报错，于是就去各大网站找相关文章，好在一篇文章提到的模式。
由于对脚手架这些东西，运用不是太熟，所以在打包项目时遇到一些小坑，在此做一下小结：
首次打包完毕，在本地打开dist下的入口页面index.html时，页面展示了一个大大的空白，打开控制台显示未发现要加载的资源，
此时查看元素，显示路径如下：
查找问题原因是由于打包时输出的资源路径问题，找到config文件夹下的index.js文件，找到assetsPublicPath参数，其默认参数值是："/"如下图：
将其修改为"./"，如下图：
修改原因：assetsPublicPath为输出后资源的根目录，"/"是根目录，参考的是盘符，是绝对路径；而"./"是当前目录，参考的是当前文件夹，是相对路径。
修改完毕后再次打包，页面还是空白页，打开控制台，也没有抱任何错误，查看元素，资源路径也是正确的，如图右侧红框：
再次陷入崩溃，控制台无任何报错，于是就去各大网站找相关bug文章，好在一篇文章提到vue-router的模式。vue-router的两种模式：hash模式和history模式。相关区别请移步官方文档：vue HTML5History模式。修改如下图所示：
修改前浏览器地址栏路径：
修改后浏览器地址栏路径：
折磨我将近两天的，空白bug到此为止算是解决了，本篇文章，纯属自我笔记类，望同仁提出修改，共同提高！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103809.html
摘要：使用手机访问演示页面如果使用和创建项目。后手机不能通过网络访问演示页面，原因是默认使用计算机本地连接的地址作为网络访问地址修改地址为要使用的无线网络地址就可以解决问题在之前的版本中可以修改目录内文件解决移除了文件后可尝试如下解决办法。 Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面 如果使用Webstorm和Vue-cli 3.5.1创建项目。npm run s...
Vue应用部署到服务器的正确方式 很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题，但真正放在服务器上后，会发现或多或少的问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。 如何打包 基于Vue-Cli,通过npm run build...
摘要：加载百度地图后报错的，我们再加载一遍你的秘钥你的秘钥为当前时间戳获取方法 一、环境搭建 1、安装node.js在计算机中https://nodejs.org/en/download/ （此为node.js官方下载地址）安装完成后打开cmd命令提示符 node -v //查询node版本号 npm -v //查询npm版本号 2、如果npm使用网速跟不上...
摘要：项目打包后上传至，并实现的预览打包项目项目命令行输入打包命令，生成了文件夹打包完成。参考各位大佬求教一个问题项目打包后如何上传到实现预览上传本地项目到和预览使用数据怎么加载本地数据能让项目在上预览 vue项目打包后上传至GitHub，并实现github-pages的预览 1. 打包vue 项目 vue项目：showImg(https://segmentfault.com/img/bVb...
阅读 3866·2021-09-24 09:47
阅读 988·2021-09-03 10:33
阅读 1940·2019-08-30 11:13
阅读 889·2019-08-30 10:49
阅读 1622·2019-08-29 16:13
阅读 1906·2019-08-29 11:28
阅读 2972·2019-08-26 13:31
阅读 3446·2019-08-23 17:14
