vue-cli项目中css背景图片及路径问题详解

引入背景图片

1. 行内样式写法

• 固定图片

 :style="{backgroundImage: 'url(' + require('@/assets/logo.png') + ')'}"

注意：1）对象形式写法，键名需要使用驼峰命名；2）注意拼接正确；

• 动态图片

:style="{backgroundImage: 'url(' +imgUrl + ')'}"
// -------------------------
data (){
    imgUrl:require('../assets/logo.png')
    // imgUrl:require('@/assets/logo.png')
}

注意：1）必须使用require。

2. css中写法（scss中）

.hideicon {
       background-image: url("~@assets/arrow.png");
 }

注意：1）是~@，~告诉 webpack 这不是一个相对路径 @ 是项目根路径的别名

3. 图片资源放置在public中

在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。 文件打包生成以后，他访问的是这个地址，http://localhost:8080/image/logo.png

直接使用相对路径引用即可。

相关知识点

require的作用及具体用法以及延伸(模块导入导出)。参考链接2很详细，我是搬运过来的。

ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口

• require时代的module

  node的module遵循CommonJS规范

  在js文件中的导出和引入如下：

   // 导出  a.js中
      module.exports = {
          a : function() {},
          b : 'xxx'
      };
  // 引入 b.js中
      var m = require('./a');
      m.a();
  

• ES6中的module

  ES6发布的module并没有直接采用CommonJS，甚至连require都没有采用，也就是说require仍然只是node的一个私有的全局方法，module.exports也只是node私有的一个全局变量属性

  export导出模块接口，常用写法如下：

  // a.js
  export default function() {}
  export function a () {}
  
  var b = 'xxx';
  export {b}; // 这是ES6的写法，实际上就是{b:b}
  setTimeout(() => b = 'ooo', 1000);
  export var c = 100;
  
  
  // 错误写法：
  export 1; // 绝对不可以
  var a = 100;
  export a;   //  为什么这种不行？？不跟上面的c差不多吗？
  
  //解释： 
  export在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义，也不可能
  在import的时候有一个变量与之对应。`export a`虽然看上去成立，但是`a`的值是一个数字，根本无法完成解构，
  因此必须写成`export {a}`的形式。即使a被赋值为一个function，也是不允许的
  

  import导入模块，常用写法如下：

  import $ from 'jquery';
  import {a,b,c} from './a';
  

  as关键字使用：

  // a.js
  var a = function() {};
  export {a as fun};   // 相当于给a.js内置函数取别名fun，对外就是fun。
  
  // b.js
  import {fun as aa} from './a';  // 相当于将从a.js导入的fun取别名aa。
  aa();
  

  default关键字（其实是别名的语法糖）

  // d.js
  export default function() {}
  
  // 等效于：
  function a() {};
  export {a as default}; // 相当于将a取别名default
  // ---------------------------------------------------------------
  import a from './d';
  
  // 等效于，或者说就是下面这种写法的简写，是同一个意思
  import {default as a} from './d';
  

  该用require还是import？

  require('./a')(); // a模块是一个函数，立即执行a模块函数
  var data = require('./a').data; // a模块导出的是一个对象
  var a = require('./a')[0]; // a模块导出的是一个数组
  
  总结：module.exports后面的内容是什么，require的结果就是什么。把它当做一个node内置的全局函数。
  它的参数甚至可以是表达式。所以是url也没啥问题。
  

  import优势：

  不会将整个模块运行后赋值给某个变量，而是只选择import的接口进行编译，这样在性能上比require好很多。

  最终，该用require还是import？

  这个问题，因为这个问题就目前而言，根本没法回答，因为目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

  参考链接：

  1. Vue.js中使用require，import 和 export，export default的资料收录总结（模块导入导出的问题）
  2. Node中没搞明白require和import，你会被坑的很惨

webpack中使用别名@配置路径

• 配置

在vue.config.js中使用别名（resolve.alias）配置@相对路径，代码如下：

resolve: {
      alias: {
        '@': resolve('src')   // @相当于目录src
        '@sass': resolve('src/sass'),     // @相当于目录src/sass
      }
    }

• 使用 js中使用省略。 scss中使用：

// 原本这样写
@import './../../../scss/mixin.scss';

// 现在可以这样写，注意是~@
@import '~@scss/icon.scss';

// 图片路径写法
.hideicon {
       background-image: url("~@assets/arrow.png");
 }

参考链接： webpack 使用别名（resolve.alias）解决scss @import相对路径导致的问题

设置背景图片大小

background-size作用：限定背景图片大小

总结：

使用如下属性图片资源会等比例缩放，不至于失真。

• cover：背景图片填满整个背景，图片可能部分看不到
• contain：背景图片能在背景全显示，背景可能部分无内容

参考链接： 菜鸟教程 CSS3 background-size 属性