react项目中静态资源访问路径配置

在 React 项目中，静态资源（如图片、字体、第三方库文件等）的路径配置需要根据构建工具（如 Webpack 或 Vite）和资源存放位置的不同来处理。以下是详细的配置方法和注意事项：

一、使用Create React App (CRA) 的默认配置 

1. 两种静态资源存放位置

在 React 项目中，静态资源通常有两种存放位置：

• public 目录：直接复制到构建输出目录（如 dist）的根路径，路径固定。
• src 目录：通过模块导入（import）的方式引用，会被 Webpack/Vite 打包处理。

2. Webpack（如 Create React App）的配置

(1) 使用 public 目录

• 存放路径：将静态资源放在 public 目录下（如 public/images/logo.png）。
• 访问路径：

在js代码中通过 process.env.PUBLIC_URL + 路径访

​
// 正确写法
<img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="logo" />

​

注意：process.env.PUBLIC_URL 在开发环境和生产环境会自动处理路径前缀（如子路径部署时） 

 ‌直接通过绝对路径引用‌（推荐在 public 目录） 

<img src="/images/logo.png" alt="Logo" />

(2) 使用 src 目录

• 存放路径：将静态资源放在 src 目录下（如 src/assets/logo.png）。
• 访问路径：
  • 通过 import 引入资源，得到 Webpack 生成的哈希路径：

import logo from './src/assets/logo.png';
<img src={logo} alt="logo" />

二、自定义Webpack配置（适用于eject或自定义项目）

如果项目需要更复杂的配置，可以修改Webpack（需eject或使用react-app-rewired）。

1、开发环境配置

1. ‌本地静态资源访问‌

   • 在 webpack.config.js 中通过 devServer.static 配置本地静态资源目录和访问路径：

devServer: {
  static: {
    directory: path.resolve(__dirname, 'static'),  // 本地静态资源物理路径
    publicPath: '/assets/'                         // 通过 http://localhost:8080/assets/ 访问资源
  }
}

directory 指定本地资源物理路径，publicPath 定义 URL 访问路径‌  

   2‌.内存打包资源引用‌

             开发环境下，Webpack 会将打包资源存放在内存中，通过根路径 / 直接访问（如 http://localhost:3000/static/js/bundle.js）

2、生产环境配置

1. ‌构建输出路径‌

   • 使用 npm run build 生成优化后的静态资源，默认输出到 build 目录（包含 static 子目录存放 CSS、JS、图片等）‌。
   • 在 webpack.config.js 中配置 output.path 和 output.publicPath：

output: {
  path: path.resolve(__dirname, 'build'),     // 物理输出目录
  publicPath: '/subdir/',                    // 资源引用前缀（如 CDN 或子目录）
  filename: 'static/js/[name].[contenthash].js'
}

publicPath 需与部署路径匹配（如 CDN 地址 https://cdn.example.com/ 或子目录 /m/）‌

2‌.动态环境适配‌

• 通过环境变量动态设置 publicPath：

publicPath: process.env.NODE_ENV === 'production' 
  ? '/production-subdir/' 
  : '/'

结合 cross-env 在构建命令中注入环境变量（如 cross-env NODE_ENV=production）‌

3、关键实践方案

1. ‌HTML 资源注入‌

   • 使用 HtmlWebpackPlugin 自动生成 index.html 并注入带 publicPath 前缀的资源路径：

plugins: [
  new HtmlWebpackPlugin({
    template: 'public/index.html',          // 模板文件
    filename: 'index.html'                  // 输出文件名
  })
]

 确保 HTML 中资源路径正确（如 <script src="/subdir/static/js/bundle.js">）‌​​​​​

1. 非打包静态资源处理‌

   • 使用 CopyWebpackPlugin 将 public 目录下的非打包资源（如 favicon.ico、robots.txt）复制到输出目录：

new CopyPlugin({
  patterns: [{ from: 'public', to: '.' }]   // 复制到构建目录根路径
})

 四、部署适配场景

‌子目录部署‌

• 若项目部署在服务器子目录（如 /app/），需配置：
  • publicPath: '/app/'
  • 服务器路由重定向（如 Nginx 配置 try_files $uri /app/index.html

‌CDN 加速‌

• 设置 publicPath 为 CDN 地址：

output: {
  publicPath: 'https://cdn.example.com/static/'
}

‌总结‌

• 开发环境：通过 devServer.static 配置本地资源路径，内存打包资源默认使用根路径‌。
• 生产环境：通过 output.publicPath 适配 CDN 或子目录，结合环境变量动态切换‌。
• 部署一致性：确保服务器路由、publicPath 和静态资源目录三者匹配‌。