将Create React App项目迁移至Parcel遇资源解析与环境变量问题

1. 解决%PUBLIC_URL%/logo.svg解析错误 #

Parcel的静态资源处理逻辑和CRA不同，CRA的%PUBLIC_URL%指向public文件夹，但Parcel默认从入口文件所在目录（这里是src/）解析资源，且不会自动识别CRA的public目录规则，可通过以下两种方式调整：

方式一：迁移静态资源到src目录 #

• 在src下新建assets文件夹，将public/logo.svg移动到src/assets/
• 修改src/index.html中的引用路径为：

  <img src="./assets/logo.svg" alt="Logo" />
  

  Parcel会自动处理相对路径，构建时会正确打包资源。

方式二：配置Parcel识别public目录为静态资源目录 #

如果不想移动文件，在项目根目录的package.json中添加static字段，指定public文件夹为静态资源目录：

{
  "static": "./public"
}

之后在src/index.html中直接使用根路径引用：

<img src="/logo.svg" alt="Logo" />

Parcel会将public目录下的文件原样复制到构建输出目录，根路径就能正确访问。

2. 在index.html中使用环境变量设置标题和描述 #

Parcel在HTML中嵌入环境变量的语法和CRA不同，不需要%REACT_APP_XXX%格式，步骤如下：

• 在项目根目录创建.env文件，定义环境变量：

  APP_TITLE=Griha Milan
  APP_DESCRIPTION=你的应用描述内容
  

• 在src/index.html中使用Parcel的模板语法引用变量：

  <title>{{ env.APP_TITLE }}</title>
  <meta name="description" content="{{ env.APP_DESCRIPTION }}" />
  

• 重启Parcel开发服务器，环境变量会自动注入到HTML中。

内容的提问来源于stack exchange，提问作者Ali Farhan