当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. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  2. 【微服务】之六:轻松搞定SpringCloud微服务-API网关zuul

    通过前面几篇文章的介绍,我们可以轻松搭建起来微服务体系中比较重要的几个基础构建服务.那么,在本篇博文中,我们重点讲解一下,如何将所有微服务的API同意对外暴露,这个就设计API网关的概念. 本系列教程 ...

  3. CvIntHaarClassifier

    //定义一个宏.宏里面是指针函数 #define CV_INT_HAAR_CLASSIFIER_FIELDS() \ float (*eval)( CvIntHaarClassifier*, sum_ ...

  4. java多线程编程核心技术——第七章补漏拾遗

    本章主要知识点: 1)线程组的使用 2)如何切换线程状态 3)SimpleDateFormat类与多线程的解决方法 4)如何处理线程异常. 这本书基本来到了终点,其实在第四章来说,核心(基础)的线程知 ...

  5. Office Add-in 设计规范与最佳实践

    作者:陈希章 发表于 2017年8月6日 引子 离上一篇Office Add-in的文章已经过去了一段时间,期间有去年Office 365 Asia Devday & Hackathon的二等 ...

  6. Struts2.5 伪静态的配置

    伪静态 伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息.或者还想运用动态脚本解决一些问题.不能用静态的方式来展示网站内容.但 ...

  7. Material使用02 图标MdIconModule、矢量图作为图标使用及改进

    1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...

  8. 微信小程序——微信支付

    这个讲起来也就比较麻烦一点,因为需要的不仅仅是咱们代码上的技术,嘿嘿! 先整理一下思路.如果想做微信支付: 1.现有一个公司账户(非个人账户),并且实名认证过的. 2.微信号 必须开通微信支付功能. ...

  9. 添加用户useradd,给用户设置修改密码passwd,修改用户信息usermod,修改用户密码状态chage,删除用户userdel,查询用户及组id,切换用户su,查看当前环境变量env

    useradd 用户名 passwd 用户名,给指定用户设密码 passwd给当前用户设密码 添加一个用户系统会自动在以下文件或目录创建对应用户信息: [root@localhost ~]# grep ...

  10. 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

    1.简要的介绍 学习react,首先学习的就是javascript,然后ES6,接着是jsx,通常来说如果有javascript的基础,上手非常快,但是真正要搭建一个前端工程化项目,还是有很多坑的 搞 ...