绝对路径和相对路径（前端开发篇）

// 绝对路径示例
'https://www.3z.ink/assets/css/style.css'   // 完整 URL
'//cdn.example.com/lib.js'                        // 协议相对 URL（跟随当前页面的协议）
'/assets/images/logo.png'                         // 根相对路径（从域名根开始）

// 相对路径示例
'./images/logo.png'          // 当前目录下
'../components/Button.js'    // 上级目录
'style.css'                  // 同级文件（省略 ./）

<!-- 当前页面：https://www.3z.ink/articles/web-path.html -->
<!-- 基准 URL：https://www.3z.ink/articles/ -->

<!-- 绝对路径 -->
<img src="/assets/images/logo.png">
<!-- 解析为：https://www.3z.ink/assets/images/logo.png -->

<!-- 相对路径 -->
<img src="./images/photo.png">
<!-- 解析为：https://www.3z.ink/articles/images/photo.png -->

<img src="../assets/css/style.css">
<!-- 解析为：https://www.3z.ink/assets/css/style.css -->

<head>
  <base href="https://www.3z.ink/subdir/">
</head>

/* 文件位置：/assets/css/style.css */

/* 推荐：从网站根开始的绝对路径 */
background: url('/assets/images/bg.png');

/* 问题写法：相对于 CSS 文件 */
background: url('../images/bg.png');
/* 解析为：/assets/images/bg.png */

// 以下代码在 https://www.3z.ink/articles/demo.html 中执行

// 获取当前页面 URL
console.log(window.location.href);
// https://www.3z.ink/articles/demo.html

// 拼接路径（直接用字符串拼接）
const apiUrl = '/api/users';  // ✅ 根相对，推荐
const apiUrl2 = './api/users'; // ❌ 容易搞混

// 动态获取当前目录
const baseDir = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);

// 当前页面：https://www.3z.ink/articles/demo.html

// 相对路径
fetch('./api/data')  
// 请求：https://www.3z.ink/articles/api/data  ← 可能不是你想要的结果

// 根相对路径
fetch('/api/data')
// 请求：https://www.3z.ink/api/data  ← 通常这才是正确的

// 绝对路径
fetch('https://api.other.com/data')
// 请求跨域 API，需要 CORS 支持

// ❌ 这是 URL 路径，不是模块路径
import './components/Button.js'  

// ✅ 这才是正确的模块引入方式
import Button from './components/Button';

// 以下代码在 /src/pages/Home.js 中

import './style.css'                    // 引入同目录下的 style.css
import '../utils/format.js'             // 引入上级目录 utils 下的文件
import '/src/utils/format.js'           // ❌ 构建工具不认这种绝对路径

// vite.config.js
export default {
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
    }
  }
}

// ❌ 不用别名时
import Button from '../../components/Button';

// ✅ 使用别名后
import Button from '@/components/Button';
import Button from '@components/Button';

// Vite 中引入静态资源
import logoUrl from '/assets/images/logo.png'   // 根路径

// 或相对路径
import logoUrl from '../assets/images/logo.png'

// 最终构建后，Vite 会替换为正确的生产路径
console.log(logoUrl)  // /assets/logo-abc123.png

// 开发环境：http://localhost:3000/
// 生产环境：https://example.com/blog/

// ❌ 硬编码了根路径
fetch('/api/posts')
// 开发环境：http://localhost:3000/api/posts ✅
// 生产环境：https://example.com/api/posts    ❌ 应该是 /blog/api/posts

// ✅ 使用 base URL 变量
const BASE_URL = import.meta.env.BASE_URL || '/';
fetch(`${BASE_URL}api/posts`)

// vite.config.ts
export default {
  // 部署到子目录时需要配置
  base: '/blog/',

  // 开发环境用 /，不影响
  // 生产环境所有静态资源路径自动加前缀
}

// next.config.js
module.exports = {
  basePath: '/blog',
  // 所有路由和静态资源自动带上 /blog 前缀
}

// 如果请求的 URL 是：
// https://www.3z.ink/articles/assets/images/logo.png
// 但实际图片放在：
// https://www.3z.ink/assets/images/logo.png
// 说明路径写成了相对路径（./assets/...），应该是绝对路径（/assets/...）