NueJS项目中解决GitHub Pages部署时的相对路径问题

在NueJS项目中部署到GitHub Pages时，开发者可能会遇到一个常见问题：页面中的图片链接和锚点等资源路径无法正确加载。这个问题通常表现为资源请求404错误，特别是在项目部署到子目录而非根目录时。

问题根源分析

当NueJS项目构建后部署到GitHub Pages的子目录（如/simple-blog）时，默认生成的资源路径是相对路径。这些路径在本地开发环境中可能工作正常，但在部署到子目录后就会失效，因为浏览器会尝试从错误的URL位置加载资源。

解决方案

NueJS提供了优雅的解决方案：通过配置base参数来指定部署目录的基础路径。具体实现步骤如下：

1. 在项目的YAML配置文件中添加base键，值为部署目录的路径。例如，如果项目部署在/simple-blog目录下，则配置应为：

   base: /simple-blog
   

2. 对于不同的部署环境，可以采用环境特定的YAML文件来管理配置。例如创建prod.yaml文件专门用于生产环境配置。

3. 构建时使用环境变量文件合并功能：

   nue build -p -e prod.yaml
   

   这个命令会将prod.yaml中的配置合并到主配置文件（如site.yaml）中，并优先使用环境文件中的配置值。

进阶实践

对于更复杂的部署场景，可以考虑以下最佳实践：

1. 自动化部署流程：结合GitHub Actions等CI/CD工具，自动根据部署环境设置正确的base路径。

2. 多环境管理：为开发、测试和生产环境分别创建不同的配置文件，确保各环境的路径配置正确。

3. 路径解析策略：理解NueJS如何处理不同类型的路径：

   • 绝对路径（以/开头）会基于base配置解析
   • 相对路径会基于当前页面URL解析
   • 完整URL会直接使用

通过合理配置base参数，开发者可以确保NueJS项目在各种部署环境下都能正确解析资源路径，提供一致的用户体验。这个解决方案不仅适用于GitHub Pages，也适用于其他需要部署到子目录的场景。