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
相关推荐
just小千25 分钟前
重学React(二):添加交互
javascript·react.js·交互
qq_5895681043 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿3 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年3 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端8 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app