Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’

问题描述

当我们开发完成后进行 npm run build打包后形成dist文件 我们通过访问dist文件中的index,会出现空白页面什么都不显示的问题,控制台中还会报‘Failed to load resource: net::ERR_FILE_NOT_FOUND’错误,其实是因为打包后的dist目录下的文件引用路径不对,会因找不到文件而报错导致白屏,cli2.0和cli3.0解决办法不同

在这里插入图片描述

Vue cli2版本解决办法

很简单找到我们的 config文件夹下面的 index.js 配置文件
在这里插入图片描述

找到其中的 build 相关配置,assetsPublicPath 这一项默认配置的是‘/’ 我们将他改成 ‘./’
在这里插入图片描述
修改完成后,重新打包即可

Vue cli3版本解决办法

cli3和cli2形成的目录是不一样的,首先我们找到根目录中新建 vue.config.js 文件
在这里插入图片描述

  • 文件中添加如下代码
    在这里插入图片描述
	javascriptmodule.exports = {publicPath: "./" };

第二个就是我们的路由文件中 如果要是选择的是 history 模式 我们需要将其注释掉
在这里插入图片描述
修改后再次打包就好了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

引用Nuget包Microsoft.EntityFrameworkCore.Tools.DotNet报错

错误如下 解决方法 使用VS2017或更高版本在改项目右键&#xff0c;选择“编辑xxx.csproj”&#xff0c;并添加如下一句话&#xff0c;就可以成功引用改Nuget包 <PackageReference Include"Microsoft.EntityFrameworkCore.Tools.DotNet" Version"2.0.3"/…

echarts 折线图 多条折线数据相同时展示的图形并没有重合

简单粗暴的使用echarts官网展示用例 我讲series中的几个对象中的值都改成了相同的 看到数值相同 图表中却没有重合 后面发现解决办法如下 只需要将对象中的stack属性删除就可以了&#xff0c;不仅仅针对这个问题 有时候我们发现图表展示的数据跟y周的值有差距时可以试试这个…

Django,ajax实现表格增删查改,Django内置分页功能。

1.工程目录 2.urls.py """Django_ajax URL ConfigurationThe urlpatterns list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/2.1/topics/http/urls/ Examples: Function views1. Add an import: from my_app im…

前端登录逻辑

话不多说直接上图片&#xff0c;纯手工打造

使用CEfSharp之旅(8)CEFSharp 使用代理 更换位置IP

直接上代码&#xff1a; var settings new CefSettings(); settings.CachePath "cache"; settings.CefCommandLineArgs.Add("proxy-server", ProxyAddress); Cef.Initialize(settings);出处&#xff1a;https://blog.csdn.net/u010919083/article/detail…

新入驻博客园立一个flag

2019年博客12 * 2篇转载于:https://www.cnblogs.com/chenzy87/p/10233209.html

echarts 多次通过setOption改变图形数据时 数据有时不进行变化

需求&#xff1a;通过切换xyz三个选项&#xff0c;进行切换统计图中的折线条数 当前数据为正确&#xff0c;页面加载默认选中x轴&#xff0c;当选中xy后也没有问题 当我取消y轴时 发现图表并没有进行变化 但是option中的数据确实已经刷新了&#xff0c;猜测是在setOption时候…

2019春总结作业

2019春总结作业 一丶我学到的内容 &#xff08;整理本课程所学&#xff0c;用思维导图的方式,思维导图的工具可以使用&#xff1a;XMind&#xff09; 二丶我的收获&#xff08;包括我完成的所有作业的链接收获&#xff09; 在这个星期里&#xff0c;我们专业的学生在专业老师的…

【数据结构入门精讲 | 第十七篇】一文讲清图及各类图算法

在上一篇中我们进行了的并查集相关练习&#xff0c;在这一篇中我们将学习图的知识点。 目录 概念深度优先DFS伪代码 广度优先BFS伪代码 最短路径算法&#xff08;Dijkstra&#xff09;伪代码 Floyd算法拓扑排序逆拓扑排序 概念 下面介绍几种在对图操作时常用的算法。 深度优先D…

腾讯地图调用获取经度纬度代码

腾讯地图调用获取经度纬度代码 //腾讯地图拼接好的数据返回经度和纬度 function getPositionInfo($address) { header("Content-type:text/html;charsetutf-8");//你腾讯地图的k值$ak KDSDS-47CDS-G3NU5-DB3TB-21212-5UBD7;$url "http://apis.map.qq.c…

安装一个插件、回馈给你一款属于猿的绚丽浏览器

不知道大家有没有了解&#xff0c;由CSDN推出的一款CSDN浏览器助手&#xff0c;其实哈就我个人而言对一些助手、插件还是很有兴趣的&#xff0c;毕竟他能够让我们快速高效的去完成我们的操作。但是一直没有找到一款称心如意的&#xff0c;知道遇见了这款CSDN浏览器助手让我爱不…

Python-DDT框架

Install pip install ddt 实例 import unittest from ddt import ddt, data, unpackddt class MyTestCase(unittest.TestCase):data((2, 4), (6, 8))# unpack 说明测试用例有多个参数unpackdef test1(self,value1,value2):self.assertEqual(value2,value12)if __name__ __main…

IT知识库

http://www.it1352.com http://www.itdaan.com/ 转载于:https://www.cnblogs.com/gcgc/p/10233732.html

《看完它面试必solo | 寻找C站宝藏》

今天给大家搂点干货&#xff0c;2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本。到目前已经很多公司开始鼓励大家去学习Vue3了&#xff0c;在这里小编就把自己所了解到的‘皮毛’贡献给大家 Vue3.0 的突出亮点 Performance&#xff1a;性能比Vue2快1.2~2倍Tree shaking s…

KVC/KVO 本质

KVO 的实现原理 KVO是关于runtime机制实现的当某个类的对象属性第一次被观察时&#xff0c;系统就会在运行期动态地创建该类的一个派生类&#xff0c;在这个派生类中重写基类中任何被观察属性的setter方法。派生类在被重写的setter方法内实现真正的通知机制如果原类为Person&am…

mysql 各个版本驱动jar包

http://central.maven.org/maven2/mysql/mysql-connector-java/转载于:https://www.cnblogs.com/mzdljgz/p/11063354.html

攻破 程序员35岁 “瓶颈” 那都不是事!

我正在参与CSDN《新程序员》有奖征文&#xff0c;点击和我一起参与吧 下面呢&#xff0c;我就在这里给大家讲述一下我的经历吧。 初衷 作为程序猿的我们&#xff0c;初衷在哪里&#xff0c;高薪&#xff1f;体面&#xff1f;热爱&#xff1f;曾经有一个同学聊天中说到这个话…

Dollar Dayz POJ - 3181

解法 完全背包大数。。。不想写大数了放个python得了 代码 dp[0 for i in range(2000)] n,kmap(int,input().split()) num[i for i in range(1,k1)] dp[0]1 for i in range(k):for j in range(num[i],n1):dp[j]dp[j-num[i]] print(dp[n]) 转载于:https://www.cnblogs.com/bacca…

Vue项目中引用‘阿里巴巴字体图标库iconfont’

1.前言 在实际开发中&#xff0c;作为前端开发人员的我们经常会遇到下面这种ui图 我们看到在上面两个平台设计图中的出现了大量的图标&#xff0c;在某种情况下&#xff0c;这种图标是需要我们自己去找的&#xff0c;不要喷我们的 ui 哈&#xff0c;主要是我喜欢麻烦 哈哈&…

学习进度条-17

第十七周 所花时间&#xff08;包括上课&#xff09; 5小时 代码量&#xff08;行&#xff09; 300 博客量&#xff08;篇&#xff09; 4 了解到的知识点 对sql server数据库的连接&#xff0c;页面的跳转 转载于:https://www.cnblogs.com/zhaoxinhui/p/11068736.html