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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
整理一下常见的IE错误
Nov 18 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
js实现分页功能
May 24 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python比较2个xml内容的方法
2015/05/11 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
西部世纪.net笔试题面试题
2014/04/03 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
教师现实表现材料
2014/02/14 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2015年档案室工作总结
2015/05/23 职场文书
会议室使用管理制度
2015/08/06 职场文书
党员反四风学习心得体会
2016/01/22 职场文书