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
相关推荐
前端_学习之路34 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_36 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码1 小时前
1.
react.js·node.js·angular.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
Misha韩2 小时前
React Native 一些API详解
react native·react.js