vue aliasConfig(模块别名配置) Nodejs基础：路径处理模块path总结

　　今天研究了下鹏哥搭建的项目代码，一我的捣鼓了半天模块别名配置，边写边测试，才慢慢明白，全部写下来当个笔记：

　　在vue项目中，常常根据须要引入不一样的功能模块，默认状况下咱们经过代码 import moduleTest from '@/views/test/hello.vue'这样的形式去进行引入操做，这里的@符号表明什么意思呢，在使用vue脚手架vue-cli搭建起来的项目中，在根目录下的build/webpack.base.config.js中，有下面这样的一段代码：

　　

　　红色框圈起来的部分的@符号即咱们引入模块时的@符号，这里的意思是使用@符号指代根目录下的src文件夹路径，这样经过@/就能够轻松引入src文件夹下的文件了，可是会有个问题，若是咱们须要引入的组件在src下一个比较深的文件夹中，引入的时候就得写不少层的路径，只是一次引入还好，屡次引入的话，路径写起来脑袋都疼，因此进行模块别名配置就能友好的解决这个问题了。

　　模块别名配置，就是先一次性的配置好模块的别名以及对应的路径，在引入模块的地方经过引入模块别名就好了，在某些模块被频繁调用的状况下很是适合，下面说一下整个配置过程：

　　（一）首先在根目录下新建一个文件夹aliasConfig，而后在aliasConfig下新建一个叫module.config.js的文件，项目结构以下：

　　（二）打开module.config.js文件，编辑内容，以下

/**
 * author lh
 * date 2019-4-1
 *
 */

'use static'
var path = require('path')
var srcDir = path.resolve(process.cwd(), 'src')

module.exports = {
  vue$: 'vue/dist/vue.esm',

  HelloWorld: srcDir + '/components/HelloWorld.vue',
  testVue: srcDir + '/views/test.vue'
}

　　这里前面第二三行代码的意思是：经过设置nodeJS的路径处理模块path的组合路径方法（详细方法内容请看Nodejs基础：路径处理模块path总结），将srcDir指向项目根目录下的src的路径地址，module.exports对象中的键值对就是咱们配置的别名跟别名对应的路径，设置好后，在须要的地方引入别名便可，代码以下：

import '模块名称' from '模块别名'

　　（三）模块别名文件配置好后，须要在build/webpack.base.config.js中修改最上面图的红圈部分的内容，修改内容以下：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: vueModuleConfig
},

 

　　（四）修改保存好后，须要从新npm run dev启动项目代码，而后引入模块别名，发现已经能够正常引入了，感受仍是有点好玩的，继续学习去了...