vue2.0 项目build后资源文件报错404的解决方案
当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的解决方案的更多相关文章
- 【项目笔记】布局文件报错Suspicious size: this will make the view invisible, probably intended for layout_width
写着写着就懵逼了,一直以为布局文件没写错啊,horizontal就是竖直啊,原来布局文件报错,不仅仅需要从报错的地方解决问题,还需要从其他地方去分析. 很明显是方向orientation选错了,应该写 ...
- Xcode升级10.3后XIB文件报错
Xcode升级10.3后XiB文件包错,提示: Failed to find or create execution context for description '<IBCocoaTouch ...
- Spring MVC 入门实例报错404的解决方案
若启动服务器控制台报错,并且是未找到xml配置文件,初始化DispatchServlet失败,或者控制台未报错404,那么: 1.URL的排查: 格式-----------协议名://地址:端口号/上 ...
- 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想试试,我 ...
- 爬取网页内容后写入文件报错UnicodeEncodeError: 'gbk' codec can't encode的问题解决方案
老猿使用如下代码读取网页内容: req = urllib.request.Request(url=url,headers=header) text = urllib.request.urlopen(r ...
- Eclipse导入maven项目时,pom-xml文件报错处理方法
报错如下: Cannot read lifecycle mapping metadata for artifact org.apache.maven.plugins 解决方法: 出现该错误是因为jar ...
- eclipse创建的maven项目,pom.xml文件报错解决方法
[错误一:]maven 编译级别过低 [解决办法:] 使用 maven-compiler-plugin 将 maven 编译级别改为 jdk1.6 以上: <!-- java编译插件 --> ...
- 【转】】Vue项目部署tomcat,刷新报错404解决办法
转自[https://blog.csdn.net/g631521612/article/details/82835518] 解决方式: - 在tocmat的webapps下的项目中创建WEB-INF文 ...
- Win10 安装msi文件报错2503/2502解决方案
我在网上查了很多资料,试了很多次都不行 唯独这种方式管用,请往下看 最后这一种方法我用了是有效的,在电脑左下角的"Win图标"上右击,选择"命令提示符(管理员)" ...
随机推荐
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 【微服务】之六:轻松搞定SpringCloud微服务-API网关zuul
通过前面几篇文章的介绍,我们可以轻松搭建起来微服务体系中比较重要的几个基础构建服务.那么,在本篇博文中,我们重点讲解一下,如何将所有微服务的API同意对外暴露,这个就设计API网关的概念. 本系列教程 ...
- CvIntHaarClassifier
//定义一个宏.宏里面是指针函数 #define CV_INT_HAAR_CLASSIFIER_FIELDS() \ float (*eval)( CvIntHaarClassifier*, sum_ ...
- java多线程编程核心技术——第七章补漏拾遗
本章主要知识点: 1)线程组的使用 2)如何切换线程状态 3)SimpleDateFormat类与多线程的解决方法 4)如何处理线程异常. 这本书基本来到了终点,其实在第四章来说,核心(基础)的线程知 ...
- Office Add-in 设计规范与最佳实践
作者:陈希章 发表于 2017年8月6日 引子 离上一篇Office Add-in的文章已经过去了一段时间,期间有去年Office 365 Asia Devday & Hackathon的二等 ...
- Struts2.5 伪静态的配置
伪静态 伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息.或者还想运用动态脚本解决一些问题.不能用静态的方式来展示网站内容.但 ...
- Material使用02 图标MdIconModule、矢量图作为图标使用及改进
1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...
- 微信小程序——微信支付
这个讲起来也就比较麻烦一点,因为需要的不仅仅是咱们代码上的技术,嘿嘿! 先整理一下思路.如果想做微信支付: 1.现有一个公司账户(非个人账户),并且实名认证过的. 2.微信号 必须开通微信支付功能. ...
- 添加用户useradd,给用户设置修改密码passwd,修改用户信息usermod,修改用户密码状态chage,删除用户userdel,查询用户及组id,切换用户su,查看当前环境变量env
useradd 用户名 passwd 用户名,给指定用户设密码 passwd给当前用户设密码 添加一个用户系统会自动在以下文件或目录创建对应用户信息: [root@localhost ~]# grep ...
- 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务
1.简要的介绍 学习react,首先学习的就是javascript,然后ES6,接着是jsx,通常来说如果有javascript的基础,上手非常快,但是真正要搭建一个前端工程化项目,还是有很多坑的 搞 ...