当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. OpenXml读取word内容(一)

    OpenXml读取word内容注意事项 1.使用OpenXml读取word内容,word后缀必须是".docx":如果word后缀是".doc"需要转成&quo ...

  2. mov指令具体解释

    MOV指令能够在CPU内或CPU和存储器之间传送字或字节.它传送的信息能够从寄存器到寄存器,马上数到寄存器,马上数到存储单元,从存储单元到寄存器.从寄存器到存储单元,从寄存器或存储单元到除CS外的段寄 ...

  3. caffe在windows编译project及执行mnist数据集測试

    caffe在windows上的配置和编译能够參考例如以下的博客: http://blog.csdn.net/joshua_1988/article/details/45036993 http://bl ...

  4. JS和JQuery中的事件托付 学习笔记

    事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...

  5. redis启动脚本报错

    1.执行redis脚本启动报错 [root@localhost ~]# service redis start /var/run/redis_6379.pid exists, process is a ...

  6. 《深入理解Java虚拟机:JVM高级特性与最佳实践》【PDF】下载

    <深入理解Java虚拟机:JVM高级特性与最佳实践>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062566 内容简介 作为一位 ...

  7. 用Azure AD 实现Web 应用身份认证的Multi-Factor Authentication(MFA)

    最近客户有个需求,希望把面向public的Web应用中的终端用户数据库由Azure AD来实现,同时希望可以用MFA来实现用户身份认证.这个想法非常好,通过使用Azure的managed servic ...

  8. MySQL必知必会笔记

    数据库和表的增删改 创建数据库 CREATE DATABASE 数据库名; # mysql中还可使用如下语句 CREATE SCHEMA 数据库名; 数据库选择 USE 数据库名; 创建表 creat ...

  9. jemeter工作台设置

    工作台的设置 1.创建一个线程组 创建一个http代理服务器:工作台-->添加-->非测试元件-->http代理服务器 设置参照下图,要录制的时候点击启动 2.设置IE浏览器 IE- ...

  10. iOS PickerView选择视图

    原文demo: @interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource> { UIPickerVi ...