vue 项目打包时样式及背景图片路径找不到的解决方式


Posted in Javascript onNovember 12, 2019

问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到;

解决方法:

主要是需要单独为 css 配置 publicPath 。

ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath 。

对于用 vue-cli 生成的项目,dist 目录结构如下:

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文件夹中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置:

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 publicPath: '../../',   // 注意配置这一部分,根据目录结构自由调整
 fallback: 'vue-style-loader'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

以上这篇vue 项目打包时样式及背景图片路径找不到的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
二行代码解决全部网页木马
Mar 28 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 #Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 #Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 #Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 #Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 #Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 #Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 #Javascript
You might like
编写PHP的安全策略
2006/10/09 PHP
多重?l件?合查?(二)
2006/10/09 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python绘制规则网络图形实例
2019/12/09 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
PHP面试题附答案
2015/11/28 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
搞笑获奖感言
2014/01/30 职场文书
摄影助理岗位职责
2014/02/07 职场文书
大学新闻系自荐书
2014/05/31 职场文书
化工专业求职信
2014/07/01 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
建筑工地文明标语
2014/10/09 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电