『VUE』关于路径引用的说明(详细图文注释)


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

路径别名

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

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

发现你走远了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值