Managing static files (e.g. images, JavaScript, CSS)
https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL 定义 网页内部使用依赖的资源的 URL前缀， 例如所有静态资源，必须以static开头，例如依赖图片 /static/XXX.jpg
经过测试，不能不适用前缀， 也不能把前缀设置为 /
STATIC_URL设置后， 在模板文件中， 可以使用static 指令生成， 对应的静态资源 URL
STATICFILES_DIRS 设置为 静态资源 存储在 实际路径， 即寻址路径， 例如资源链接中为 /static/xxx.jpg
且 xxx.jpg存在于 物理路径 var/www/xxx.jpg
设置
STATICFILES_DIRS= ['var/www/']
Managing static files (e.g. images, JavaScript, CSS)¶Websites generally need to serve additional files such as images, JavaScript, or CSS. In Django, we refer to these files as “static files”. Django provides
django.contrib.staticfilesto help you manage them.This page describes how you can serve these static files.
Configuring static files¶
Make sure that
django.contrib.staticfilesis included in yourINSTALLED_APPS.In your settings file, define
STATIC_URL, for example:STATIC_URL = '/static/'In your templates, use the
statictemplate tag to build the URL for the given relative path using the configuredSTATICFILES_STORAGE.{% load static %} <img src="{% static 'my_app/example.jpg' %}" alt="My image">Store your static files in a folder called
staticin your app. For examplemy_app/static/my_app/example.jpg.Your project will probably also have static assets that aren’t tied to a particular app. In addition to using a
static/directory inside your apps, you can define a list of directories (STATICFILES_DIRS) in your settings file where Django will also look for static files. For example:STATICFILES_DIRS = [ BASE_DIR / "static", '/var/www/static/', ]See the documentation for the
STATICFILES_FINDERSsetting for details on howstaticfilesfinds your files.
REACT 模板
在react模板，就是 index.html 文件中， 可以使用PUBLIC_URL 占位符 来拼接静态资源的URL， 功能类似 django的模板中的static指令
但是在默认情况下， PUBLIC_URL 会被忽略， 这样就不能和django对接。
<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="theme-color" content="#000000"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon.png"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async> <link async rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css"> <link rel="stylesheet" href="https://unpkg.com/react-instantsearch-theme-algolia@4.0.0/style.min.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" async/> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>Isomorphic</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
https://stackoverflow.com/questions/53225426/how-to-replace-public-url-in-react-app-on-an-azure-website
给出了答案， 在 package.json文件中，设置 homepage属性，并设置 相对地址， 则可以定义 npm run build 后编辑的结果中，带有 static前缀。
HOW TO REPLACE %PUBLIC_URL%
By default, Create React App produces a build assuming your app is hosted at the server root.
example.comIf your website isn't served from this root, (maybe you want to serve fromexample.com/relativepath, you can override this by specifying the homepage in your package.json"homepage": "http://example.com/relativepath",This will let Create React App correctly infer the root path to use in the generated HTML file.