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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
js date 格式化
Feb 15 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python3 深浅copy对比详解
2019/08/12 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python 实现表情识别
2020/11/21 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
公司JAVA开发面试题
2015/04/02 面试题
美术兴趣小组活动总结
2014/07/07 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
欢迎新生标语2015
2015/07/16 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers