react自学(6) 部署到tomcat中

1.设置项目名

在package.json文件配置

go 复制代码
"homepage": "/myapp"

2.设置Router类型

说明:由于本文是写部署tomcat,因此使用HashRouter类型,不然会出现空白;如果使用springboot或在apche/nginx,则可以使用BrowserRouter。

html 复制代码
    <HashRouter>
      <div>
        <Route path="/" exact render={(props) => (
          <></>
        )} />
      </div>
    </HashRouter>

3.使用.env设置自定义的变量

在根目录下(src的同级),添加.env文件

如想设置变量ROOT_NAME=myapp

在.env中,自定义变量的名称,必须为REACT_APP_开头

复制代码
REACT_APP_ROOT_NAME=myapp

4.在代码中获取变量

typescript 复制代码
console.log(process.env.REACT_APP_ROOT_NAME)
console.log(process.env.PUBLIC_URL)

说明:获取第一步设置的项目名则使用process.env.REACT_APP_ROOT_NAMEprocess.env.PUBLIC_URL

5.多环境配置打包命令

环境变量文件命名规则:.env.[环境名称]

如:

本地环境配置文件:.env

开发环境配置文件:.env.development

生产环境配置文件:.env.production

json 复制代码
{
  "scripts": {
    "build": "react-scripts build",// 本地环境
    "build-dev": "REACT_APP_ENV=development react-scripts build", // 开发环境
    "build-prod": "REACT_APP_ENV=production react-scripts build", // 生产环境
  }
}

对应执行打包命令:

bash 复制代码
npm run build
npm run build-dev
npm run build-prod
相关推荐
DoraBigHead26 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00129 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州40 分钟前
希尔排序
前端·javascript
爱学习的茄子41 分钟前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
前端小盆友42 分钟前
从零实现一个GPT 【React + Express】--- 【5】实现网页生成能力
gpt·react.js·express
用户2519162427111 小时前
Canvas之绘制图形
前端·javascript·canvas
gnip1 小时前
99%前端不知道的API WebTransport
前端·javascript
Lazy_zheng1 小时前
React 核心 API 全景实战:从状态管理到性能优化,一网打尽
前端·javascript·react.js
轻语呢喃1 小时前
每日LeetCode : 杨辉三角
javascript·后端·算法
Jayconscious1 小时前
React源码解析(五):hook原理
前端·react.js·源码阅读