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

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

在某一个vue文件引入变量文件写法：

可以使用路径别名写法，哪个文件需要变量，就需要手动引入才可以使用，每个文件都手动引入太麻烦了！！！

<template>
  <div>
    <p class="c-green">color: green</p>
    <p class="c-blue">color: green</p>
  </div>
</template>
<script>
export default {
};
</script>

<style lang="scss" scoped>
// 我给assets设置了路径别名，所以写~assets就行了
@import "~assets/styles/variables.scss";

.c-green{
  color: $cgreen;
}
.c-blue{
  color: $cgreen2;
}
</style>

假如你需要在vue文件引入一个scss文件

<style lang="scss">
// 如果是引入less、scss文件请用这种预编译语言的写法，否则变量等写法会失效，这种写法会预编译
// 可以在如文件的scss里引入变量，这样在所有vue模板里都可以使用变量，最终效果同下面配置文件
@import "assets/styles/mui.scss";

// 传统css引入写法，不会预编译，所以变量会失效，如果你引入纯css文件，使用这种写法也是可以的，完全没有问题
@import url(assets/styles/mui.scss);


</style>

还有一个插件也可以解决全局引入scss变量文件的问题:

安装 style-resources-loader 、vue-cli-plugin-style-resources-loader

 npm i --save-dev  style-resources-loader vue-cli-plugin-style-resources-loader

创建 vue.config.js，加入下面配置

const path = require('path');
module.exports = {
  // 安装 style-resources-loader 与 vue-cli-plugin-style-resources-loader
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      // 这三种 patterns 写法都是可以的
      // patterns: ["./src/assets/styles/variables.scss", "./src/assets/styles/variables2.scss"]
      // patterns: "./src/assets/styles/variables.scss"
      patterns: [
        // 两种路径写法都可以，这里的路径不能使用 @ 符号，否则会报错
        // path.resolve(__dirname, './src/assets/styles/variables.scss')
        path.resolve(__dirname, 'src/assets/styles/variables.scss')
      ]
    }
  }
};

修改完配置文件，记得需要重启服务才会生效，重启完，所有模板都可以使用变量了，不需要每次都手动引入了。

首先说一下如何设置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的路径