vue build打包时img、背景图、和外部字体库相关问题

一、关于npm run build 打包时img图片不加载的问题

在config 文件夹下的 index.js中修改配置

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',//将原来的'/'修改为'./'
}

关于是否将图片转成base64格式的设置，相关配置在build文件夹下的 webpack.base.conf.js

{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 1024,//单位为b  1024实际大小为1kb 超过1kb的图片将不进行base64转换name: utils.assetsPath('img/[name].[hash:7].[ext]')}
},

二、关于引入外部字体库和img图片的相关配置

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath: '../../',         // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../； 注意配置这一部分，根据目录结构自由调整fallback: 'vue-style-loader'})
} else {return ['vue-style-loader'].concat(loaders)
}加上  publicPath: '../../', 配置后重写打包即可。

三、部分图片无法正确访问到路径

打包之后，点击 index.html 文件，有部分本地图片无法访问。

<img src="../../../../static/images/NORMAL.png">

打包之后，在F12下，查看应该为base64位字节码：

<img data-v-5ed6d1d8="" src="https://img-blog.csdnimg.cn/2022010619232660168.png">

对于部分打包不了，最初以为这是因为图片过大的问题，我把图片缩小依然不能解决。

然而通过npm run build -> cd dist -> http-server，开启本地服务之后，再次访问，可以查看到本地图片。

vue build打包时img、背景图、和外部字体库相关问题相关推荐

Vue build打包之后，刷新页面出现404解决方案
Vue build打包之后,刷新页面出现404,HTML5 History 模式原因分析: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于 ...
electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能原因在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...
当鼠标移入时切换背景图时闪烁的问题
当页面第一次加载完成时,鼠标移入时需要切换的背景图还未被加载过,本地没有这张图片,所以切换的时候回出现闪烁的情况,我们可以在一个地方先把这张图放下,但是不让它显示出来,这样当我们第一次加载完页面时需要 ...
CSS缩小窗口时，背景图出现右侧空白
缩小窗口时CSS背景图出现右侧空白BUG的解决方法(兼容各浏览器) 解决办法: 在css内加入如下两行代码,让它自己判断: width:expression(document.body.clientW ...
成功解决打包时不能import自定义的包或库出现运行exe时No module named 缺少包
成功解决打包时不能import自定义的包或库出现运行exe时No module named 缺少包目录解决问题解决方法 T1.转移 T2.采用下列方法 T3.添加路径
Maven打包时出现程序包不存在和test相关报错
Maven打包时出现程序包不存在和test相关报错 1.程序包不存在的问题例如打包失败后报错情况如下: 程序可编译执行,但是打包存在问题.通过查看maven列表可以看到相关依赖包也导入成功,可能是m ...
vue 打包css路径不对_vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
VUE项目打包（解决背景图片不显示问题）
vue项目打包 vue项目打包改变路径配置配置背景图片路径在命令行中用npm run build 进行打包. 查看改变路径配置将绝对路径改为相对路径目标文件:项目目录 > confi ...
html2canvas生成长图片时导致背景图渲染不全问题
文章目录 1.问题 2.解决 3.问题猜测 1.问题在移动端中使用html2canvas生成图片时,因为数据较多,导致生成的图片很长,图片后边一小段中设置的html背景图直接没有显示出来. 2.解决 ...

vue build打包时img、背景图、和外部字体库相关问题

一、关于npm run build 打包时img图片不加载的问题

二、关于引入外部字体库和img图片的相关配置

三、部分图片无法正确访问到路径

vue build打包时img、背景图、和外部字体库相关问题相关推荐

最新文章

热门文章