基于webpack下在vue中使用scss，背景图片的使用

mushang 发布于2019-08-30 15:43 / 2904人阅读

摘要：在设置背景图片，在项目打包后，图层路径会增加文件夹所在路径。我们希望的情况下，背景图路径应为，而实际则会出现，注意，这里是多余的。解决方法有个在中直接设置在配置文件夹找到，作以下更改增加增加

在scss设置背景图片(background-image)，在项目webpack打包后，图层路径会增加css文件夹所在路径。
我们希望的情况下，背景图路径应为"static/img/imgname.png"，而实际则会出现：
"static/css/static/img/imgname.png"，注意，这里static/css是多余的。

解决方法有2个：
1.在template中直接设置style="background-image:url("")";
2.在webpack配置文件夹找到utils.js，作以下更改：
**增加publicPath**

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    //增加publicPath
    publicPath:  "../../",
    fallback: "vue-style-loader"
  })
}

GPU云服务器云服务器 vue 中使用 webrtc vue中使用webrtc webpack使用 webpack 使用公用cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116026.html

基于webpack下在vue中使用scss，背景图片的使用

摘要：在设置背景图片，在项目打包后，图层路径会增加文件夹所在路径。我们希望的情况下，背景图路径应为，而实际则会出现，注意，这里是多余的。解决方法有个在中直接设置在配置文件夹找到，作以下更改增加增加在scss设置背景图片(background-image)，在项目webpack打包后，图层路径会增加css文件夹所在路径。我们希望的情况下，背景图路径应为static/img/imgname....

Alfred 2019-08-23 16:25 评论0 收藏0
从零开始做Vue前端架构（1）

摘要：前言想想也已经做过不少架构的项目了，有基于，基于，基于，基于的。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。前言想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 评论0 收藏0
基于webpack的vue实例

摘要：配置文件根目录下创建文件中的对象，用于处理目录的对象，提高开发效率。引入我们编写的测试用文件。这是我个人在学习vue+webpack的一个实例，希望对读者是有用的，同时也求大神指教。菜鸟第一次写这，水平有限。目录结构 showImg(https://segmentfault.com/img/bVEnYI?w=646&h=290); 加载依赖在这之前确保安装了node和npm ...

wums 2019-08-20 11:39 评论0 收藏0
vue2.x-cnode(vue全家桶)

摘要：后续会改成的版本安装安装编译语法使用编译语法图片路径与打包安装引入图片需要依赖的加载器样式引入打包文件编译打包引入样式文件编译 vue2.x-cnode 关于项目 vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发，使用webpack构建工具编译打包项目如果此开源项目对大家学习vue的全家桶有帮助，请给我一个star,因为你的star让我...

ThinkSNS 2019-08-20 14:26 评论0 收藏0