前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >飞冰项目修改根目录

飞冰项目修改根目录

原创
作者头像
挥刀北上
发布2022-07-25 11:58:30
2.1K0
发布2022-07-25 11:58:30
举报
文章被收录于专栏:Node.js开发

再用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/"这行操作,此时运行打包,就没有问题了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档