You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React-Admin项目构建时添加静态资源路径前缀的解决方案咨询

React-Admin项目构建时添加静态资源路径前缀的解决方案咨询

嗨,我来帮你搞定这个React-Admin构建后资源路径不匹配Django要求的问题~

首先,咱们得先明确你的项目是基于Create React App(CRA)还是Vite构建的,不同的构建工具配置方式略有不同,我给你分两种情况说明:

情况一:项目基于Create React App构建

这是React-Admin早期常用的构建方式,有两种配置方法:

  • 方法1:修改package.json的homepage字段
    打开项目根目录的package.json,添加或修改homepage字段为绝对路径"/static/",具体配置如下:

    {
      "name": "你的项目名称",
      "homepage": "/static/",
      // 其他原有字段...
    }
    

    保存后重新运行npm run build,这时候生成的index.html里的资源路径就会自动带上/static/前缀,变成你需要的static/assets/...格式啦。

    你之前尝试设置没生效,大概率是路径写的不对,比如用了相对路径./static/,而Django需要的是绝对路径开头的前缀,改成绝对路径就能解决啦。

  • 方法2:用环境变量临时指定前缀
    如果不想修改package.json,可以在构建命令里直接通过PUBLIC_URL环境变量指定前缀,命令如下:

    PUBLIC_URL=/static/ npm run build
    

    这个命令会临时覆盖默认的资源路径,构建出来的效果和修改homepage是一样的。

情况二:项目基于Vite构建

如果是较新的React-Admin项目,大概率用的是Vite构建,这时候需要修改Vite的配置文件:

打开项目根目录的vite.config.js(或vite.config.ts),在defineConfig里添加base配置项,设置为"/static/"

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/static/', // 这里设置静态资源的路径前缀
});

保存后运行npm run build,生成的dist目录里的index.html资源路径就会符合Django的要求了。

最后再确认下你的Django配置:你已经把dist目录加入了STATICFILES_DIRS,之后运行python manage.py collectstatic时,Django会自动把dist里的资源收集到STATIC_ROOT指定的static目录下,访问时就能通过/static/路径正常加载这些资源啦~

备注:内容来源于stack exchange,提问作者Ahmad

火山引擎 最新活动