vue-cli中css引入图片打包路径问题

问题

开发模式

图片路径（存储文件夹）

src|__assets|__img|__css|__js

这是我在css中引入图片的写法，在开发模式中是ok的
base.scss

$icon_url :'../img/icon.png' ;.logo{background:url('../img/login_logo.png');
}

打包后

这里就发现这个路径在css的下一级去了，那就相当于我们要在打包的时候强行给他弄到相对路径的前两级去。

解决

既然是打包问题，那我们就应该从打包配置文件去入手
config/index.js修改这句

assetsPublicPath: './',

build/utils,js加上publicPath: '../../'

return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'
})

打包

vue-cli中css引入图片打包路径问题相关推荐

webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
vue-cli中解决css引用图片打包后找不到文件资源的问题
1.在CSS中引入图片 #slider1 {background-image: url(./bg02.jpg);background-size: cover; } 注意:此处的图片与索引文件在同一个目 ...
static图片编译了 vue_详解vue-cil和webpack中本地静态图片的路径问题解决方案
本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样,这是不 ...
Vue框架Vue-cli脚手架引入图片报错
Vue框架Vue-cli脚手架引入图片报错一.import导入图片方法第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在dat ...
webpack 多页面 html,基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用...
一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等二.html中img引入图片问题解决 1.在index.html插入i ...
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
Vue项目中如何引入Toast插件
Vue项目中如何引入Toast插件安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...

vue-cli中css引入图片打包路径问题

问题

开发模式

打包后

解决

打包

vue-cli中css引入图片打包路径问题相关推荐

最新文章

热门文章