vue 2.x Vue 3.x 日常采坑之 设置alias别名、background引入图片、全局引入scss文件 的问题

vue 2.x Vue-CLI 3.x 日常采坑之设置alias别名、background引入图片 的问题,看准环境，切勿根据本文盲目修改代码

首先说一下如何设置alias别名的问题，什么是别名？做什么用的，简单的说就是如果你的src下面目录嵌套非常深，在一个组件里引入其他组件或者css、img资源的时候，你写的路径就会非常长，而且经常会写错，alias别名就是解决这个问题的，如果你还不懂那就可能一下webpack的官网详细解释吧。
另外一个要说的问题就是项目中使用scss的时候，需要全局引入变量或者一些公用函数，全局引入之后在组件内就可以直接使用了，不必每个组件单独引入。
在vue.config.js里配置,如果你的项目没有这个文件，自己手动创建一下就好了。

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `
        @import "assets/styles/common/variables.scss";
        @import "assets/styles/common/px2rem.scss";
        @import "assets/styles/iconfont/iconfont.scss";
                        `
      },
    }
  },
  chainWebpack: config => {
    config
      .resolve.alias
      .set('@', resolve('src'))    //配置src目录别名
      .set('assets', resolve('src/assets'))    //配置src/assets目录别名
      .set('components', resolve('src/components'));    //配置src/components目录别名
    config
      .plugin('html')
      .tap(args => {
        args[0].title= '答题项目'
        return args
      });
  }
}

在组件内直接这样引入组件就可以了

import ItemContainer from 'components/ItemContainer'

在组件内的style里的css，background-image使用别名的时候需要加~,且图片地址不需要加引号

.item_back {
    background-image: url(~assets/images/2-1.png);
    background-size: 100% 100%;
}

img图片地址也是一样,使用别名的时候需要加~

            <img src="~assets/images/5-2.png" class="share_img">

还有个问题是如果需要在js里(vue的生命周期钩子函数里、methods里...)修改页面里的背景图，就不能这样写了，那样你只能把图片放到puhlic目录下，路径写public的路径