vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺

因为对脚手架这些东西,应用不是太熟,所以在打包项目时碰到一些小坑,在此做一下小结:
初次打包终了,在当地翻开dist下的进口页面index.html时,页面展现了一个大大的空缺,翻开控制台显现未发明要加载的资本,
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》

此时检察元素,显现途径以下:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》

查找题目缘由是因为打包时输出的资本途径题目,找到config文件夹下的index.js文件,找到assetsPublicPath参数,其默许参数值是:’/’以下图:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》
将其修正成’./’,以下图:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》
修正缘由:assetsPublicPath为输出后资本的根目次,’/’是根目次,参考的是盘符,是绝对途径;而’./’是当前目次,参考的是当前文件夹,是相对途径。
修正终了后再次打包,页面照样空缺页,翻开控制台,也没有抱任何毛病,检察元素,资本途径也是准确的,如图右边红框:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》
再次堕入崩溃,控制台无任何报错,因而就去各大网站找相干bug文章,幸亏一篇文章提到vue-router的形式。vue-router的两种形式:hash形式和history形式。相干区别请移步官方文档:vue HTML5History形式。修正以下图所示:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》
修正前浏览器地址栏途径:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》
修正后浏览器地址栏途径:
《vue经由vue-cli打包后当地翻开页面资本加载报错,页面空缺》

熬煎我快要两天的,空缺bug到此为止算是处理了,本篇文章,纯属自我笔记类,望同仁提出修正,共同提高!

    原文作者:耗子
    原文地址: https://segmentfault.com/a/1190000018974541
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞