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

更新时间：2019年11月12日 16:59:47 作者：向梦想出发11

今天小编就为大家分享一篇vue 项目打包时样式及背景图片路径找不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

问题描述：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 项目打包时样式及背景图片路径找不到的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue+LogicFlow+Flowable实现工作流
本文主要介绍了Vue+LogicFlow+Flowable实现工作流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
vue清除浏览器全部cookie的问题及解决方法(绝对有效!)
最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue解决一个方法同时发送多个请求的问题
今天小编就为大家分享一篇vue解决一个方法同时发送多个请求的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue使用一些外部插件及样式的配置代码
这篇文章主要介绍了vue使用一些外部插件及样式的配置代码,本文分步骤实例图文相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-11-11
vue+elementUI显示表格指定列合计数据方式
这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
详解vue表单——小白速看
大家可以用 v-model 指令在表单控件元素上创建双向数据绑定。这篇文章主要介绍了vue表单详解,需要的朋友可以参考下
2018-04-04
vue elementui 实现搜索栏公共组件封装的实例代码
这篇文章主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
vue如何给自定义的组件绑定点击事件
这篇文章主要介绍了vue如何给自定义的组件绑定点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue报错Syntax Error:TypeError: this.getOptions is not a
前几天在vue运行项目过程中报错了,所以下面这篇文章主要给大家介绍了关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法,需要的朋友可以参考下
2022-07-07
vue中状态管理器Pinia的用法详解
Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎,它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库,下面就跟随小编一起来学习一下它的具体使用吧
2023-10-10