Taro项目初始化完毕之后，在编写组件的同时，需要进行页面与组件的组合和引用，这时，使用Vscode的默认提示的引用，会提示找不到/src路径，但是手工引用相对路径，却可以正常引用成功。
1
| Module not found: Error: Can't resolve '/src/components' in '/xxx/project/src/pages/index'
|
但是很多时候，组件的位置会需要调整，每次都使用相对路径是十分繁琐的，能否使用绝对路径呢？是不是Taro就不支持绝对路径呢？
查看Taro说明之后可以发现，Taro确实是不允许“直接”使用绝对路径引用的，但是我们可以通过设置目录别名，来引用路径。
添加alias配置
在Taro项目config/index.js下，添加alias配置：
1
2
3
4
5
6
7
8
9
10
11
12
|
const path = require('path')
module.exports = {
alias: {
'@/components': path.resolve(__dirname, '..', 'src/components'),
'@/utils': path.resolve(__dirname, '..', 'src/utils'),
'@/package': path.resolve(__dirname, '..', 'package.json'),
'@/project': path.resolve(__dirname, '..', 'project.config.json'),
}
}
|
原写法：
1
2
3
4
| import A from '../../components/A'
import Utils from '../../utils'
import packageJson from '../../package.json'
import projectConfig from '../../project.config.json'
|
添加alias后写法：
1
2
3
4
| import A from '@/components/A'
import Utils from '@/utils'
import packageJson from '@/package'
import projectConfig from '@/project'
|
这里面的路径是可以根据需求自由配置的，@即为src，如果需要添加其他的目录，也可以按照这种方式来添加即可。至此，就可以使用别名来变相使用绝对路径了。
建议别名使用 @/ 开头而非仅用 @ 开头，因为有小概率会与某些 scoped 形式的 npm 包（形如：@tarojs/taro, @babel/core）产生命名冲突。
VSCode配置
需要在jsconfig.json,tsconfig.json中进行配置来让编辑器识别路径，并可以使用自动路径补全功能。
1
2
3
4
5
6
7
8
9
10
11
| {
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["./src/components/*"],
"@/utils/*": ["./src/utils/*"],
"@/package": ["./package.json"],
"@/project": ["./project.config.json"],
}
}
}
|
参考：