路径别名
vue-cil构建的
在jsconfig.json
文件中
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
这里面的路径配置是 TypeScript 或 JavaScript 中 tsconfig.json(或 jsconfig.json)文件的 paths 配置,用来设置 路径别名。它的作用是通过指定某个路径的别名,使得导入模块时可以简化路径书写,避免相对路径的嵌套。
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
},
- “@/*”: 这是路径别名,@ 被指定为路径的起始符号,表示你可以用 @/ 来替代项目中的 src 目录的相对路径。
- "src/": 这个配置的意思是:当你使用 @/ 时,它会映射到 src/* 目录下的内容。
假设你有如下的目录结构:
/project
/src
/components
Header.tsx
/utils
helper.ts
/tsconfig.json
-
项目中的文件可以通过 @/ 来引用 src/ 下的文件。例如:
-
使用路径别名引用 Header.tsx 组件:
import Header from '@/components/Header'; // 等同于 import Header from 'src/components/Header'
使用路径别名引用 helper.ts 工具函数:
import { helperFunction } from '@/utils/helper'; // 等同于 import { helperFunction } from 'src/utils/helper'
优点:
- 简化导入路径:避免了长路径或相对路径的使用,使得导入更简洁。例如:import { helperFunction } from ‘…/…/…/utils/helper’ 可以通过 import { helperFunction } from ‘@/utils/helper’ 替代。
- 便于重构:如果需要重构 src 目录的位置,只需要修改路径别名配置,而无需修改每个文件中的导入路径
- 配置要点:
baseUrl:在使用路径别名时,通常需要设置 baseUrl,它定义了项目的根目录。通常设置为 ./(项目根目录)。
"baseUrl": "./"
- 举一反三
"baseUrl": "./",
"paths": {
"~/*": [
"test/*"
]
},
假设项目目录结构
/project
/test
/unit
exampleTest.ts
/tsconfig.json
在代码中,你可以这样导入 test/unit/exampleTest.ts 文件:
import { example } from '~/unit/exampleTest';
webpack构建的类似例子
// webpack.config.js
const path = require('path');
module.exports = {
resolve: {
alias: {
'~': path.resolve(__dirname, 'src/')
}
}
};
pubilc/static 与 pubilc下的文件引用
Vue 项目中,public 文件夹中的资源通常也可以直接通过根路径引用。
Vue 会自动处理资源的引用,public/static 中的文件会被直接暴露在根路径下。
- public/static目录中的内容:你可以像这样引用 public/static 目录下的文件:
/project
/public
/static
logo.png
<img src="/static/logo.png" alt="logo" />
- public 目录中的资源:直接通过根路径引用
/project
/public
logo.png
<img src="/logo.png" alt="logo" />
相对路径
万不得已采用
…/ 和 ./ 都是相对路径的表示方式,主要区别在于它们的作用范围:
-
./ 表示当前目录,即引用的文件在同一目录下。比如 ./file.js 表示当前文件夹中的 file.js。
-
…/ 表示上级目录,即返回到当前目录的上一级目录,再查找目标文件。比如 …/file.js 表示上级目录中的 file.js。
简单来说:
./:当前目录
…/:上一级目录
总结
大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!
版权声明:
发现你走远了@mzh原创作品,转载必须标注原文链接
Copyright 2024 mzh
Crated:2024-3-1