vue --- cli build 后的项目,图片路径出错
今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~
当用vue-cli自动构建项目后,有两种运行方法,分别是:
npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片。
npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题。
绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe
相对路径:从当前路径开始的路径
构建后的项目, 都需要读取静态资源,静态资源分为三种, JS, CSS, IMG,目录结构如下: //结构目录 index.html static |--img |--picname |--css |--app.css |--js |--app.js
此时通过img标签引入的图片显示正常,是因为img为html标签,他的路径是由index.html开始访问的,他走static/img/'图片名'
是能正确访问到图片的.
但是app.css访问static/img/'图片名'
是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。
具体办法是:
打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可。
vue --- cli build 后的项目,图片路径出错的更多相关文章
- vue打包之后找不到图片路径,打包项目时,dist文件夹内部分图片找不到
1.打包项目时,会默认把存放在public内的小于4k的图片转换成base64,作为内联样式. 可以在vue.config.js中修改默认大小,在chainWepack:config=>{}中添 ...
- vue上线后,背景图片路径错误
build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...
- vue项目图片路径问题
一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发 ...
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- vue.js 独立引用css文件图片路径错误
vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...
- @vue/cli 3 打包文件读取绝对路径处理
@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- HBuilderX 打包 uniapp 项目 图片路径不显示(不正确)
打包h5项目本地服务运行正常 部署后页面显示空白 在根目录manifest.json中配置h5下的publicPath即可 "h5" : { "template" ...
- VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })
案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...
随机推荐
- mysql忘记密码怎么处理
1修改/etc/my.cnf文件 在[mysqld]下加一行skip-grant-tables 2.重启mysql使配置生效 3.免密码登录mysql并设置新密码 设置新的root密码,并刷新权限 4 ...
- useradd: cannot open /etc/passwd
[root@ftp ~]# useradd -g ftp -s/sbin/nologin liwmuseradd: cannot open /etc/passwd [root@ftp ~]# user ...
- 题解 P3200 【[HNOI2009]有趣的数列】
说起来这是今天第三道卡特兰数了... 楼上的几篇题解好像都是直接看出这是卡特兰数,所以我就写一下为什么这道题可以用卡特兰数吧. 考察这样相邻的两项:\(a_{2i-1}\)与\(a_{2i}\),根据 ...
- Python学习第二天-编写购物车
需求:1.启动程序后,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 ...
- 关于Android制作.9.png图片
第一个问题,.9格式的图片与我们之前的一般图片有什么问题呢? 这是安卓开发里面的一种特殊的图片. 这样的格式的图片在android 环境下具有自适应调节大小的能力. (1)同意开发者定义可扩展区域,当 ...
- Vue源代码笔记(一)数据绑定
VUE数据绑定介绍 数据绑定是vue的基础核心之一,本文以Vue对象(当然也包含VueComponent)里的data数据绑定为例,阐述整个绑定的过程. Vue的数据绑定由三部分组成, Observe ...
- sass10 demo1
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- DGA特征挖掘
摘自:https://paper.seebug.org/papers/Archive/drops2/%E7%94%A8%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E8%A ...
- hpuoj--校赛--爬楼梯(模拟)
问题 E: 感恩节KK专场--爬楼梯 时间限制: 1 Sec 内存限制: 1000 MB 提交: 382 解决: 89 [提交][状态][讨论版] 题目描述 来机房比赛的时候大家都会爬楼梯,但是每 ...
- CUDA笔记(七)
今天集中时间找程序的问题.于是发现: 首先,程序里的kernel想要调试,必须用nsight. 于是一堆找.http://www.nvidia.com/object/nsight.html http: ...