vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下:
1、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代码,如图所示:
vue项目 webpack打包后,图片路径是绝对路径的更多相关文章
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- vue项目webpack打包后图片路径错误
首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...
- vue项目webpack打包后修改配置文件
从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...
- vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- vue-cli webpack打包后加载资源的路径问题
vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: confi ...
- vue通过webpack打包后怎么运行
1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...
- vue项目webpack打包后有的文件big 问题
vue项目打包的时候,有的big, 超过1M, 需要进行优化,方法有: 1. 非首屏图片,可以采用懒加载的方式, 如:图片的懒加载, vue中路由的懒加载 等 2. 各个模块, 采用如sea ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
随机推荐
- Java根据国家二字码获取国家英文名称,中文名称实例
import org.apache.commons.lang.StringUtils; public class CountryUtil { /** * 根据国家二字码获取国家对应的中文(英文,cod ...
- SuperSubScriptHelper——Unicode上下标辅助类
在项目的实施过程中,类似化学分子式.平方.立方等,需要处理上.下标字符. 上下标字符的实现,大致有两种方式,一种是字符本身包含上下标信息,另一种方式是通过格式化标记实现上下标字符的显示. Word中的 ...
- 解决ImmediateDeprecationError 用Python获取Yahoo数据
最近正在看用 python 进行数据处理的内容,很多教程都会用 pandas 去抓取金融数据.我也尝试跑教程上的示例代码以抓取数据. 本文着重介绍遇到的问题以及解决方法. 注:我使用的是 Python ...
- 在Ubuntu 14.04.1 LTS 上安装gettext失败
使用apt-get install -f,因为有额外的依赖.
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...
- MongoDB 排序文档
sort() 方法 要在 MongoDB 中的文档进行排序,需要使用sort()方法. sort() 方法接受一个文档,其中包含的字段列表连同他们的排序顺序. 要指定排序顺序1和-1. 1用于升序排列 ...
- mysql8.0.11 在windows64安装 步骤
MySQL8.0 Windows zip包下载地址:https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 环境:Wind ...
- 关于Spring MVC中的表单标签库的使用
普通的MVC设计模式中M代表模型层,V代表视图层,C代表控制器,SpringMVC是一个典型的MVC设置模式的框架,对于视图和控制器的优化很多,其中就有与控制器相结合的JSP的表单标签库. 我们先简单 ...
- C#的抽象类和接口的区别,在什么时候使用才合适?
理解抽象类 abstract class和interface在c#语言中都是用来进行抽象类(本文 中的抽象类并非从abstract class翻译而来,它表示的是一个抽象体,而abstract cl ...
- 第三次作业 史浩然 -assassin Talon