1.有关在vue项目中设置别名
在用vue-cli搭建的vue项目中经常会引用各个地方的文件,而在webpack.base.conf.js这个文件里可以为一些常用的目录设置一个简短且易懂的别名。
2.如何设置别名
在webpack.base.conf.js文件中可以找到这样一段代码:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
- extensions代表的是带这种后缀的文件可以自动解析,引入的时候不用写后缀:
import HelloWorld form '../components/HelloWorld'
这里省略了.vue后缀。
- alias则代表别名,使用别名可以在引入模块时变得更简单。
例如这里用@代表src目录,在引入组件的时候则可以这么写:
import HelloWorld form '@/components/HelloWorld'
这样依然不是特别方便,因为components目录是我们经常会引用组件的目录,在alias里再加一行:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@components': resolve('src/components')
}
},
就可以这样引入组件了:
import HelloWorld form '@components/HelloWorld'
[ 好像只去掉了一个/ ] ((ー̀дー́)不要在意这些细节)
3.设置别名的原理分析
首先看到这段代码里的resolve方法,在同一个文件里可以找到这样一段代码:
const path = require('path')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
path是node里面的一个模块,主要作用是对路径进行处理。
path.join() 方法会把给定的path片段连在一起。具体用法请查看node文档_path.join。
__dirname表示的是文件所在的当前目录。
resolve函数的含义就是把文件指向到和build文件夹同级的文件夹下。
再看我们刚刚那段代码:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@components': resolve('src/components')
}
},
resolve('src')就指向了src目录。要配置其他别名也可以依葫芦画瓢了~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。