vue项目配置别名

TIP

项目配置别名后，将使引入文件更加快捷方便。

配置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模块
const path = require('path')
//__dirname 当前模块的目录名
//path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径。
const resolve = dir => path.join(__dirname, dir)

//如果path模块仅在此次用到，也可写成如下代码（不推荐）
const resolve = 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为链式配置

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

import XXX from '@api/...'
import XXX from '@components/...'
import XXX from '@utils/...'

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

//vue.config.js
//引入node的path模块
const path = require('path')
//__dirname 当前模块的目录名
//path.resolve() 方法会将路径或路径片段的序列解析为绝对路径。
const resolve = dir => path.resolve(__dirname, dir)

//如果path模块仅在此次用到，也可写成如下代码（不推荐）
const resolve = 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文件

文件内容如下

const path = 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\node
path.resolve()   //D:\a\b\node
path.resolve(__dirname)   //D:\a\b\node
path.resolve(__dirname,'src')   //D:\a\b\node\src
path.resolve(__dirname,'/src')   //D:\src
path.resolve(__dirname,'src/ab')   //D:\a\b\node\src\ab
path.resolve(__dirname,'/src/ab')   //D:\src\ab
path.resolve(__dirname,'/src/ab','..')   //D:\a\b\node\src
path.resolve(__dirname,'/src/ab','..')   //D:\src
path.resolve(__dirname,'/src/ab','..','c')   //D:\src\c
path.join()   //.
path.join(__dirname)   //D:\a\b\node
path.join(__dirname,'src')   //D:\a\b\node\src
path.join(__dirname,'/src')   //D:\a\b\node\src
path.join(__dirname,'src/ab')   //D:\a\b\node\src\ab
path.join(__dirname,'/src/ab')  //D:\a\b\node\src\ab
path.join(__dirname,'src/ab','..')   //D:\a\b\node\src
path.join(__dirname,'/src/ab','..')  //D:\a\b\node\src
path.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 ..代表上级目录

阅读原文 (opens new window)