React front-end plus prefix (including pages and static resources)

First: prefix configuration (base + publicPath)

I am using the react framework +antd+umi scaffolding

Knowledge link: The difference between the base of vue-router and the publicPath of vue.config.js and the base
of the contact router is to control the routing jump prefix. (//Add a prefix to the route) publicPath is to control the static resource access path. (//Static css, js resource prefix) – The img of the component defined above cannot be rendered, and you need to find a location to fill it up yourself. For example: I wrote src='/logo.svg' before, and I defined it later (not currently I know there is no good way), the " process.env " (an environment object in Node.js) involved in this piece is another knowledge point, and the content of this article is not involved

Knowledge link: nginx deployment secondary directory cannot load css and js problem solution
Note:
the 'prefix addition' in this section can only be enabled when packaging (build), and must be noted when starting (starting) the project locally.
Reason: There is no such "haochi" file in the project, and an error will be reported when starting

Second: Configure the packaging command

Generally speaking, start the project npm run dev
and I define it here as

"start:haochi": "cross-env UMI_TITLE='xx中心' UMI_ENV=haochi  umi dev",
"build:haochi": "cross-env UMI_TITLE='xx中心' UMI_ENV=haochi  umi build",

About why this is configured, because I use umi scaffolding
UmiJS+React to configure different environment variables (configure UMI_ENV )

Among them, "start:haochi" requires the definition of a file. The key is that the name of the file config.haochi.js should be consistent with the name behind "start:"

Otherwise, an error will be reported

Third: nignx configuration

Page configuration (note when using alias, add "/" at the end)

      ## 页面配置（使用alias需注意，最后面要加“/”）
       location /haochi/ {
    
    
		alias   D:/nginx-1.20.2/html/haochi/ ;
		try_files $uri $uri/ /index.html last;
		#autoindex on;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
		add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
	   }