资源相对引用路径

问题描述

一般情况下,通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。

但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。

解决办法

打开webpack.prod.conf.js

找到output增加 publicPath: './', 即可,如图。

那么这样后,资源的引用路径就正确了。

当然在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用。

背景图片的引用问题

上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:

url(../../static/img/logo-index.2f00bf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码,如图所示:

添加如图所示的一行代码,这样不论是字体还是图片的引用问题都能解决。

webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?的更多相关文章

  1. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  2. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  3. 16.如何做到webpack打包vue项目后,可以修改配置文件

    问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...

  4. webpack打包vue项目之后怎么启动&注意事项

    参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...

  5. 解决webpack打包vue项目后,部署完成后,刷新页面页面404

    1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...

  6. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  7. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

  8. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  9. webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

随机推荐

  1. cookiejar

    referer:https://www.cnblogs.com/why957/p/9297779.html文章介绍了四种模拟登陆方法 yield Request()可以将一个新的请求返回给爬虫执行 在 ...

  2. CentOS7 下设置静态IP

    1.更改虚拟机网络适配器 虚拟机-->设置-->网络适配器  网络连接选择NAT模式 2.设置虚拟网络编辑器 编辑-->虚拟网络编辑器 3.修改本地VMnet8IP 4.修改linu ...

  3. Monkey之常用ADB命令(新猿旺学习总结)

    查看 adb 版本                                     adb version获取连接设备及状态                           adb dev ...

  4. MTK-TP(触屏)解读一

    MTK中的TP代码结构并不复杂,相比于其他的系统更为的简单些.它使用的是input子系统,通过该系统来上报触摸按键. 首先我们来看看TP的文件夹下的各代码文件的功能. 文件名 具体功能 关系文件 tp ...

  5. centos7救援模式--误删/usr/bin/恢复

    模拟场景 centos7 误删/usr/bin/等系统内置文件夹, 导致几百个内置命令丢失. 修复 rescue模式 vm模拟一遍(如果在物理机, 可通过U盘方式直接开机U盘进入选择救援模式, 方式通 ...

  6. 你不知道的JS(2)深入了解闭包

    很久之前就想写一篇关于闭包的博客了,但是总是担心写的不够完全.不够好,不管怎样,还是要把我理解的闭包和大家分享下,比较长,希望耐心看完. 定义 说实话,给闭包下一个定义是很困难的,原因在于javasc ...

  7. etcd 启动错误

    Apr 26 16:17:25 ceph-0 etcd: f281dc69fb4dd3d8 became candidate at term 3574Apr 26 16:17:25 ceph-0 et ...

  8. nginx 配置反向代理

    之前的前端是8123端口,使用此端口让nginx的反向代理. vim /etc/nginx/conf.d/80-fr.conf upstream cats{ server 127.0.0.1:8123 ...

  9. MVC模式和Django中的MVT模式

    MVC模式:是一种程序设计模式,其核心思想是分工.解耦,让不同的代码块之间降低耦合,增强代码的可扩展性和可移植性,实现向后兼容. MVC:Model-View-Control M:主要封装对数据库层的 ...

  10. cssselector元素定位

    转自https://blog.csdn.net/qq_40024178/article/details/78945651 一.概述 cssSelector也是一种常用的选择器,CSS locator比 ...