前端 - 从零开始，用elementui躺坑vue - alias - 大前世界

首先，小编声明，本项目是使用webpack4进行打包，关于本项目的配置都是基于webpack4集成的，对于低版本的webpack，仅供参考。

webpack官方解释：更轻松地创建别名import或require某些模块。

常用：为一堆常用src/文件夹添加别名。

为什么要取别名呢？

举个例子，NBA有一个球星叫Giannis Antetokounmpo，翻译成中文叫扬尼斯·安特托昆博，他还有一个更简易的名字 - 字母哥。是不是更简单，更顺口呢！

回到正题，当我们编写代码时，import Utility from '../../utilities/utility';直接让人崩溃。引入alias，是为了让后续引用的地方减少路径的操作，化繁为简。

  // build/webpack.base.conf.js 36～39行
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }

在vue项目中，vue-cli脚手架生成项目模板时，默认配置@为项目根目录下放资源和源码的src目录的别名。而我们也在无时无刻的使用它，可能我们自己都不注意

improt Layout from @/component/layout

这段代码是不是很眼熟，没错，这就是引用的/src/compoent/layout/index.vue。我们在任何地方引用，webpack都可以识别，这多亏了alias。

CSS loader会把非根路径的URL解释为相对路径，加～前缀才会解释为模块路径。因此，在使用时加～，告诉加载器这是一个模块，而不是一个相对路径。简单的说：～视为模式解析是webpack的事情，而不是css-loader的事情

注：不使用～，实验也是可以成功的。但是issue提出的方案是在@前面加上~。因此，小编推荐加～

<img src="~img/1.png" />

JS使用时，不需要加～

<script>
  import '@/css/index.css'
</script>

只有在template中的静态文件和style中的静态文件地址需要加～，在script中，直接使用定义的别名

从零开始，用elementui躺坑vue - alias