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