菜单

vue的挖坑和爬坑之css背景图样式终极解决措施,cli脚手架引入图片的三种方式总计_vue

2020年3月27日 - 澳门太阳娱乐手机登录

本人个人常用的艺术,平昔在物色越来越好的不二法门,假诺各位大佬有啥建议,能够给自身议论留言哦

原问题

#wrapper{
        width:100%;
        height:100%;
        position:fixed;
        background-image:url(./img/open_bg.jpg)
    }

vue的挖坑和爬坑之css背景图样式终极解决措施,cli脚手架引入图片的三种方式总计_vue。在.vue文件中的CSS样式中,使用背景图

在webpack打包后,路线不对,如何做吧?

1、import方法

回答

假诺你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}卡塔尔,里面增加上面这几个性情就全面化解了publicPath:
‘../../’

第一步:在.vue文件中import edit from ‘path’

解释

文本最后会卷入压缩为js。当运维的时候,css中的相对路线指向已经发生变化指向了根目录,所以现身加载错误的难点。

下边是那几个插件的表达。

extract-text-webpack-plugin

功效:该插件的重大是为着分离css样式,幸免将样式打包在js中挑起页面样式加载错乱的光景。

插件参数:该插件有三个参数意义分别如下:

use:指须求什么的loader去编写翻译文件,这里由于源文件是.css所以选取css-loader
fallback:编写翻译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路线

第二步:在data对象中定义六特性情edits,值对应edit

来源

 

第三步:在template中 给标签绑定属性

最终刷新分界面看效率就足以了!

2、static方法

第一步:图表放在static文件夹,在data对象的四个里定义属性pro_img,属性值是图表与.vue的相对路线

第二步:在template中 给标签绑定属性

刷新看成效

淹没vue组件css中背景图片路线民报告错难题

前提是你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract,里面增加上面那天性子就到家清除了publicPath:
‘../../’

解释

文本最后会卷入压缩为js。当运营的时候,css中的相对路径指向已经发生变化指向了根目录,所以现身加载错误的主题素材。

上面是以此插件的表明。

extract-text-webpack-plugin

职能:该插件的重大是为着分离css样式,防止将样式打包在js中孳生页面样式加载错乱的现象。

插件参数:该插件有多个参数意义分别如下:

use:
指要求什么的loader去编写翻译文件,这里由于源文件是.css所以接纳css-loader

fallback: 编写翻译后用什么loader来提取css文件

publicfile: 用来覆盖项目路径,生成该css文件的文书路线

以上那篇vue-cli脚手架引入图片的三种方法计算就是我分享给大家的全体内容了,希望能给我们二个参照,也期望我们多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图