Vue --- vue中使用vue.config.js来配置路径别名

一，css样式
在开发项目时，会有一些公用的样式，需要很多页面引用，平时写路径去引用css文件可能会这么写

../../../assets/css/base.css

可以看到写了很多的../去寻找文件；

在Vue中可以通过别名形式来简化这一写法
1、在你的项目文件夹下新建vue.config.js文件

2、在vue.config.js文件中配置如下代码

module.exports = {
  configureWebpack:{
    resolve:{
      alias:{
        "assets":"@/assets",
      }
    }
  }
}

开发vue的都知道assets是什么东西，就是资源，也就是可以放一些图片，css文件等等，以上代码这么写就等于直接定位到了assets文件夹

3、如果你有一个公用的css文件，比如叫base.css，里面有一个样式如下

body{
  color:#f00;
}

4、想要全局使用，直接在App.vue中的style模块写上如下代码即可

<style>
  @import "assets/css/base.css";
</style>

效果如下动态图

（这是我平时做测试时乱写的一些内容，忽略即可）可以看到除了比较特殊的标签，文字基本上都变成了咱们自定义的红色；
并且通过在浏览器按F12审查元素也能看到

二、图片的别名引用
在操作完第一步的代码后，就可以使用别名引用图片了；
例如在生成vue项目的时候，会有一张默认的logo.png的图片，引用时如下写法即可

<template>
  <div>
    <h2>Vuex第一个页面</h2>
    <img src="@/assets/logo.png" alt="" style="display: block;width:100px;height:100px;" />
  </div>
</template>

三、组件的别名引用
除了css样式文件，组件的components或者网络的network都可以进行别名配置

module.exports = {
  configureWebpack:{
    resolve:{
      alias:{
        "assets":"@/assets",
        "components":"@/components",
        "network":"@/network",
      }
    }
  }
}

其中拿组件来说，比如组件Vuexone想要引用组件Vuextwo，写上如下代码即可

<script>
  import Vuextwo from "@/components/Vuextwo"

  export default {
    name: "Vuexone",
    components:{
      Vuextwo
    }
  }
</script>