Vue3配置@别名来统一资源相对路径
在组件引入的时候,为了统一import的路径到指定的相对目录,避免在引入不同的组件的时候通过“.”,".."来切换路径,可以通过配置别名@来指定基地址,这样提高代码的可读性,比如在目录多层级的时候,就会出现“
../../../components/button.ve",这样层级查找的时候,我们需要数”../"来确定引用的目录。(@是其中一个通用的字符,换成其他字符也是可以的,比如下面的例子使用"#"来实现)
说明:下面的案例是通过vite和vs code来实现的
添加一下path的依赖,path是nodejs下的一个基础模块,那么直接引入node
yarn add --dev @types/node
vite.config.ts文件中添加resolve的配置一下别名,这里别名用“#”来表示,这里的配置是告知vite怎么打包,如果只是编译执行,这一步就已经完成了。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'#': path.resolve(__dirname, "src")
},
},
plugins: [vue()],
})
接下来为了让IDE有智能提示,在tsconfig.json(如果用的是js,这个文件名是:jsconfig.json)中配置compilerOptions节点,指定baseUrl基地址,然后通过paths配置项#下的所有目录是基于当前目录下的src目录开始,作为统一的起始路径。
{
……忽略很多其他的配置
"compilerOptions": {
"baseUrl": ".",
"paths":{
"#/*":["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
下面来看一下使用的效果
可以看到,当输入“#”的时候IDE会自动提示选择路径
其中TestPath的导入用了“#”,同时也是支持原来通过“.”的方式来做路径偏移的。
实际运行起来也是ok的。
希望对您有帮助,欢迎讨论+关注。
相关文章
- MyBatis如何实现分页查询?_mybatis collection分页查询
- 通过Mybatis Plus实现代码生成器,常见接口实现讲解
- MyBatis-Plus 日常使用指南_mybatis-plus用法
- 聊聊:Mybatis-Plus 新增获取自增列id,这一次帮你总结好
- MyBatis-Plus码之重器 lambda 表达式使用指南,开发效率瞬间提升80%
- Spring Boot整合MybatisPlus和Druid
- mybatis 代码生成插件free-idea-mybatis、mybatisX
- mybatis-plus 团队新作 mybatis-mate 轻松搞定企业级数据处理
- Maven 依赖范围(scope) 和 可选依赖(optional)
- Trace Sql:打通全链路日志最后一里路