关于alias:从零开始用elementui躺坑vue-alias

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

什么是 alias？

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

罕用：为一堆罕用 src/ 文件夹增加别名。

为什么要取别名呢？

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

回到正题，当咱们编写代码时，import Utility from ‘../../utilities/utility’; 间接让人解体。引入 alias，是为了让后续援用的中央缩小门路的操作，化繁为简。

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 援用

CSS loader 会把 非根门路的 URL 解释为相对路径 ，加～前缀 才会解释为 模块门路。因而，在应用时加～，通知加载器这是一个模块，而不是一个相对路径。简略的说：～视为模式解析是 webpack 的事件，而不是 css-loader 的事件

注：不应用～，试验也是能够胜利的。然而 issue 提出的计划是在 @后面加上~。因而，小编举荐加～

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

js 援用

JS 应用时，不须要加～

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

只有在 template 中的动态文件和 style 中的动态文件地址须要加～，在 script 中，间接应用定义的别名

参考文献

1. webpack