当vue项目build后,我们会看到css、js报错404的问题;

那我们就去找错误原因吧。

首先,查看build后的dist文件目录

可以看出,js、css在index.html的同级目录下;

然后,查看index.html,看到下面的代码 

<script type=text/javascript src=/static/js/app.41ce5f66426864089c57.js></script>

我们先普及下文件路径的知识    ../上级目录   ./同级目录  /根目录

看上面的代码,js、css文件的访问是根目录,所以我们只需要将根目录改成同级目录就可以了。

修改方法:找到config文件夹下的index.js文件

找到build.assetsPublicPath,将"/"修改成"./"

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './' // 下面的省略

再次执行 npm run build 完美解决

vue2.0 项目build后资源文件报错404的解决方案的更多相关文章

  1. 【项目笔记】布局文件报错Suspicious size: this will make the view invisible, probably intended for layout_width

    写着写着就懵逼了,一直以为布局文件没写错啊,horizontal就是竖直啊,原来布局文件报错,不仅仅需要从报错的地方解决问题,还需要从其他地方去分析. 很明显是方向orientation选错了,应该写 ...

  2. Xcode升级10.3后XIB文件报错

    Xcode升级10.3后XiB文件包错,提示: Failed to find or create execution context for description '<IBCocoaTouch ...

  3. Spring MVC 入门实例报错404的解决方案

    若启动服务器控制台报错,并且是未找到xml配置文件,初始化DispatchServlet失败,或者控制台未报错404,那么: 1.URL的排查: 格式-----------协议名://地址:端口号/上 ...

  4. ASP.NET CORE MVC 2.0 项目中引用第三方DLL报错的解决办法 - InvalidOperationException: Cannot find compilation library location for package

    目前在学习ASP.NET CORE MVC中,今天看到微软在ASP.NET CORE MVC 2.0中又恢复了允许开发人员引用第三方DLL程序集的功能,感到甚是高兴!于是我急忙写了个Demo想试试,我 ...

  5. 爬取网页内容后写入文件报错UnicodeEncodeError: 'gbk' codec can't encode的问题解决方案

    老猿使用如下代码读取网页内容: req = urllib.request.Request(url=url,headers=header) text = urllib.request.urlopen(r ...

  6. Eclipse导入maven项目时,pom-xml文件报错处理方法

    报错如下: Cannot read lifecycle mapping metadata for artifact org.apache.maven.plugins 解决方法: 出现该错误是因为jar ...

  7. eclipse创建的maven项目,pom.xml文件报错解决方法

    [错误一:]maven 编译级别过低 [解决办法:] 使用 maven-compiler-plugin 将 maven 编译级别改为 jdk1.6 以上: <!-- java编译插件 --> ...

  8. 【转】】Vue项目部署tomcat,刷新报错404解决办法

    转自[https://blog.csdn.net/g631521612/article/details/82835518] 解决方式: - 在tocmat的webapps下的项目中创建WEB-INF文 ...

  9. Win10 安装msi文件报错2503/2502解决方案

    我在网上查了很多资料,试了很多次都不行 唯独这种方式管用,请往下看 最后这一种方法我用了是有效的,在电脑左下角的"Win图标"上右击,选择"命令提示符(管理员)" ...

随机推荐

  1. 小tip:生成一组不重复的随机数(去重的方法)

    var arr = []; for(var i=0;i<150;i++){ // num为0-100的随机数 var num = Math.round(Math.random()*100); v ...

  2. java学习笔记—集合之Map集合

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 12.0px Times } p.p2 { margin: 0.0p ...

  3. Python爬虫(十五)_案例:使用bs4的爬虫

    本章将从Python案例讲起:所使用bs4做一个简单的爬虫案例,更多内容请参考:Python学习指南 案例:使用BeautifulSoup的爬虫 我们已腾讯社招页面来做演示:http://hr.ten ...

  4. mysql数据表最高速迁移,mysql的存储引擎为:myisam

    本文链接:http://blog.csdn.net/u010670689/article/details/41346689 需求: 开发产品过程中,有个项目分支,数据库须要带数据拷贝,可是表的数据非常 ...

  5. HTTP Status 500 - Request processing failed; nested exception is org.hibernate.exception.GenericJDBCException: could not execute statement

    1.什么操作出现:当我在项目中添加产品或者修改时,浏览器出现HTTP Status 500 - Request processing failed; nested exception is org.h ...

  6. DB主从一致性架构优化4种方法

    需求缘起 大部分互联网的业务都是"读多写少"的场景,数据库层面,读性能往往成为瓶颈.如下图:业界通常采用"一主多从,读写分离,冗余多个读库"的数据库架构来提升数 ...

  7. NIO相关基础篇三

    转载请注明原创出处,谢谢! 说在前面 上篇NIO相关基础篇二,主要介绍了文件锁.以及比较关键的Selector,本篇继续NIO相关话题内容,主要谈谈一些Linux 网络 I/O模型.零拷贝等一些内容, ...

  8. 3D Game Programming withDX11 学习笔记(一) 数学知识总结

    在图形学中,数学是不可或缺的一部分,所以本书最开始的部分就是数学知识的复习.在图形学中,最常用的是矢量和矩阵,所以我根据前面三个章节的数学知识,总结一下数学知识. 一.矢量 数学中的矢量,拥有方向和长 ...

  9. MVC+EF 入门教程(一)

    一.前言 本人小白,写这篇博客是为了记录今天一天所学的知识,可能表达不是那么的准确和清楚,欢迎在留言区写下您的建议,欢迎纠错.希望这篇文章对你有所帮助学习 .Net MVC有所帮助.废话不多说了,我们 ...

  10. Confluence 持续集成平台部署记录

    1.1 Confluence简介 Confluence是一个专业的企业知识管理与协同软件,也可以用于构建企业wiki.使用简单,但它强大的编辑和站点管理特征能够帮助团队成员之间共享信息.文档协作.集体 ...