webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

作者:骨月枫🍁 时间:2024-04-27 16:10:21 

最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误。。。网上查找了一堆解决办法,总结如下

一、首先修改config目录下的index.js文件

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

将其中build的配置项assetsPublicPath进行修改,改为

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

目的是将资源文件的引入路径,改为相对地址(相对index.html)

二、此时html中的js、css、img引入均没有问题,但是css中的background-image还是报404

此时的问题原因是,使用了相对地址后,在css进行引入的图片路径,其相对的是css文件的路径

此时的修改方法是,修改build文件夹中的utils.js文件,修改如下这一行

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

这样css中的背景图也OK了,如果在css中引入字体也可以用这样的方式修复404问题。

总结

以上所述是小编给大家介绍的解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)网站的支持!

来源:https://www.cnblogs.com/skyHF/archive/2018/01/08/8243653.html

标签:webpack,vue,打包
0
投稿

猜你喜欢

  • python实现根据窗口标题调用窗口的方法

    2022-06-12 04:24:40
  • 详解Python实现URL监测与即时推送

    2023-12-29 08:18:35
  • python+splinter实现12306网站刷票并自动购票流程

    2023-08-02 20:50:18
  • python-jwt用户认证食用教学的实现方法

    2023-11-21 17:57:09
  • MySQL的Query Cache原理分析

    2024-01-25 05:20:29
  • ​​​​​​​如何利用python破解zip加密文件

    2022-11-27 17:51:30
  • python逆向微信指数爬取实现步骤

    2022-03-31 03:36:48
  • JavaScript中的匀速运动和变速(缓冲)运动详细介绍

    2024-06-07 15:28:03
  • python爬虫面试宝典(常见问题)

    2023-02-27 19:46:01
  • ASP SCRIPT: 计数器(使用GrapShot组件)

    2008-11-07 15:36:00
  • Pipenv一键搭建python虚拟环境的方法

    2022-07-15 03:49:41
  • 解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory

    2023-09-05 06:07:44
  • 灵活运用Python 枚举类来实现设计状态码信息

    2023-04-29 15:03:34
  • Python爬虫之爬取哔哩哔哩热门视频排行榜

    2021-08-19 04:33:14
  • 连接MySQL时出现1449与1045异常解决办法

    2024-01-16 14:07:02
  • js自动闭合html标签(自动补全html标记)

    2023-08-25 07:06:35
  • Python 如何操作 SQLite 数据库

    2024-01-24 00:09:27
  • OpenCV中Canny边缘检测的实现

    2022-10-17 10:10:19
  • Access与Flash的结合应用

    2008-11-20 16:44:00
  • SQL Server连接失败错误及解决

    2008-01-28 21:09:00
  • asp之家 网络编程 m.aspxhome.com