Webpack配置alias

alias的配置

通常我们的项目结构如下所示

src

api …

assets …

components …

store …

utils …

然后每次需要引入某文件的时候都得 src/api … 或 src/components … 等

这无疑是非常麻烦的，于是就可以配置别名，来避免我们书写的麻烦

向前看，就不举vue-cli3.0之前版本是在哪个文件配置的了，直接以vue-cli3.0为例

在vue.config.js上做如下配置

//vue.config.js//引入node的path模块constpath=require('path')//__dirname 当前模块的目录名//path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径。constresolve=dir=>path.join(__dirname,dir)//如果path模块仅在此次用到，也可写成如下代码（不推荐）constresolve=dir=>require('path').join(__dirname,dir)module.exports={ configureWebpack:{ resolve: { alias:{ '@':resolve('src'), '@api':resolve('src/api'), '@components':resolve('src/components'), '@assets':resolve('src/assets'), '@store':resolve('src/store'), '@utils':resolve('src/utils'), } } }}

有时候配置文件还可以这样配置

configureWebpack:config=>{Object.assign(config,{resolve: { alias:{ '@':resolve('src'), '@api':resolve('src/api'), '@components':resolve('src/components'), '@assets':resolve('src/assets'), '@store':resolve('src/store'), '@utils':resolve('src/utils'), } }}) }

config就是指向configureWebpack，所以只要确保 configureWebpack.resolve.alias或者

chainWebpack..resolve.alias有配置到即可。方式可以多种多样，比如

chainWebpack:config=>{config.resolve.alias .set('@',resolve('src'), .set('@api':resolve('src/api') .set('@components',resolve('src/components') .set('@assets',resolve('src/assets') .set('@store',resolve('src/store') .set('@utils',resolve('src/utils')} }

chainWebpack为链式配置

配置完之后就可以如下方式引用文件

importXXXfrom'@api/...'importXXXfrom'@components/...'importXXXfrom'@utils/...'

当然肯定有人也会发现，有的项目配置别名是采用 path.resolve(),配置如下

//vue.config.js//引入node的path模块constpath=require('path')//__dirname 当前模块的目录名//path.resolve() 方法会将路径或路径片段的序列解析为绝对路径。constresolve=dir=>path.resolve(__dirname,dir)//如果path模块仅在此次用到，也可写成如下代码（不推荐）constresolve=dir=>require('path').resolve(__dirname,dir)module.exports={ configureWebpack:{ resolve: { alias:{ '@':resolve('src'), '@api':resolve('src/api'), '@components':resolve('src/components'), '@assets':resolve('src/assets'), '@store':resolve('src/store'), '@utils':resolve('src/utils'), } } }}

咋一看怎么完全一样？

其实不然，接下来讲讲 path.join() 和 path.resolve() 的区别

path.join() 和 path.resolve() 的区别

新建个path.js文件

文件内容如下

constpath=require('path')console.log("__dirname//"+__dirname)console.log("path.resolve()//"+path.resolve())console.log("path.resolve(__dirname)//"+path.resolve(__dirname))console.log("path.resolve(__dirname,'src')//"+path.resolve(__dirname,'src'))console.log("path.resolve(__dirname,'/src')//"+path.resolve(__dirname,'/src'))console.log("path.resolve(__dirname,'src/ab')//"+path.resolve(__dirname,'src/ab'))console.log("path.resolve(__dirname,'/src/ab')//"+path.resolve(__dirname,'/src/ab'))console.log("path.resolve(__dirname,'/src/ab','..')//"+path.resolve(__dirname,'src/ab','..'))console.log("path.resolve(__dirname,'/src/ab','..')//"+path.resolve(__dirname,'/src/ab','..'))console.log("path.resolve(__dirname,'/src/ab','..','c')//"+path.resolve(__dirname,'/src/ab','..','c'))console.log("path.join()//"+path.join())console.log("path.join(__dirname)//"+path.join(__dirname))console.log("path.join(__dirname,'src')//"+path.join(__dirname,'src'))console.log("path.join(__dirname,'/src')//"+path.join(__dirname,'/src'))console.log("path.join(__dirname,'src/ab')//"+path.join(__dirname,'src/ab'))console.log("path.join(__dirname,'/src/ab') //"+path.join(__dirname,'/src/ab'))console.log("path.join(__dirname,'src/ab','..')//"+path.join(__dirname,'src/ab','..'))console.log("path.join(__dirname,'/src/ab','..') //"+path.join(__dirname,'/src/ab','..'))console.log("path.join(__dirname,'/src/ab','..','c') //"+path.join(__dirname,'/src/ab','..','c'))

使用node执行该命令，打印结果如下

__dirname//D:\a\b\nodepath.resolve()//D:\a\b\nodepath.resolve(__dirname)//D:\a\b\nodepath.resolve(__dirname,'src')//D:\a\b\node\srcpath.resolve(__dirname,'/src')//D:\srcpath.resolve(__dirname,'src/ab')//D:\a\b\node\src\abpath.resolve(__dirname,'/src/ab')//D:\src\abpath.resolve(__dirname,'/src/ab','..')//D:\a\b\node\srcpath.resolve(__dirname,'/src/ab','..')//D:\srcpath.resolve(__dirname,'/src/ab','..','c')//D:\src\cpath.join()//.path.join(__dirname)//D:\a\b\nodepath.join(__dirname,'src')//D:\a\b\node\srcpath.join(__dirname,'/src')//D:\a\b\node\srcpath.join(__dirname,'src/ab')//D:\a\b\node\src\abpath.join(__dirname,'/src/ab') //D:\a\b\node\src\abpath.join(__dirname,'src/ab','..')//D:\a\b\node\srcpath.join(__dirname,'/src/ab','..') //D:\a\b\node\srcpath.join(__dirname,'/src/ab','..','c') //D:\a\b\node\src\c

path.resolve()方法

path.resolve()方法是以程序为根目录，作为起点，根据参数解析出一个绝对路径

以应用程序为根目录

普通字符串代表子目录

/代表绝对路径根目录

..代表上级

path.resolve(__dirname,'/src')//D:\src/指向跟目录path.resolve(__dirname,'/src/ab','..','c')//D:\src\c..代表上级目录

path.join()方法

path.join()方法是将多个参数字符串合并成一个路径字符串path.join(__dirname,'/src')//D:\a\b\node\src/不影响拼接path.join(__dirname,'/src/ab','..','c') //D:\a\b\node\src\c..代表上级目录

这回应该都清楚了吧。