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
相关推荐
百思可瑞教育1 分钟前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94915 分钟前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld22 分钟前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
良木林41 分钟前
浅谈原型。
开发语言·javascript·原型模式
百思可瑞教育2 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
木心操作3 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing3 小时前
sqb&ks二面(准备)
前端·javascript·面试
前端码虫4 小时前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
夜宵饽饽4 小时前
上下文工程实践 - 工具管理(上篇)
javascript·后端