再用react开发项目时，部署时一帮会将其放到根目录下：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<title>赛事编排快捷操作</title>
<link rel="icon" href="/favicon.png"><script defer src="/js/index.js"></script><link href="/css/index.css" rel="stylesheet"></head>
<body>
<div id="ice-container"></div>
</body>
</html>
观察页面中资源的引入，都是绝对路径，都在根目录下，但是有时候，我们需要开发多个应用，需要部署多个前端项目，就要将其放到不同的目录，这样的话，路径就会产生问题，比方说我们想将前端项目放到/static/easyP/下面，目标代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<title>赛事编排快捷操作</title>
<link rel="icon" href="/static/easyP/favicon.png">
<script defer src="/static/easyP/js/index.js"></script>
<link href="/static/easyP/css/index.css" rel="stylesheet">
</head>
<body>
<div id="ice-container"></div>
</body>
</html>
怎么修改呢？手动是一个方法，但是每次打包都需要手动去改，这里面还会产生部分资源错误，等等，所以我们需要利用工程化来实现，修改配置文件build.json的配置项：
代码语言：javascript复制{
"vite": false,
"plugins": [
[
"build-plugin-moment-locales",
{
"locales": [
"zh-cn"
]
}
],
[
"build-plugin-ignore-style",
{
"libraryName": "@alifd/next"
}
]
],
"proxy": {
"/api4": {
"enable": true,
"target": "http://47.104.7.142:30092"
}
},
"publicPath": "/static/easyP/"
}
主要就是"publicPath":"/static/easyP/"这行操作，此时运行打包，就没有问题了。
