Nginx部署react项目（子目录）

最新推荐文章于 2024-07-04 10:29:00 发布

smallbaoo

最新推荐文章于 2024-07-04 10:29:00 发布

阅读量2k

点赞数 1

分类专栏： react linux 笔记文章标签： react部署 nginx 子目录

本文链接：https://blog.csdn.net/qq_38433300/article/details/103984865

版权

本文主要介绍了如何使用Nginx部署采用create-react-app创建的React项目，并处于子目录下。强调了history模式的配置要点，包括代码中设置basename、修改homepage属性，以及Nginx配置location块，确保正确代理请求到index.html。

摘要由CSDN通过智能技术生成

路由的两种模式

history：hash	不需要服务器支持
history：browser	react-router官方推荐，需要服务器支持（因为是SPA项目，url切换时需要服务器始终返回index.html）

由于hash不需要服务器支持，只需要放上去就ok了，不需要不过多的配置，就不多说了

此篇文章主要是记录部署history：browser 模式的相关配置

使用create-react-app创建的项目相关代码及配置

// package.json
"homepage":"http://a.yeashian.com/app"

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter  as Router } from 'react-router-dom'
import './assets/reset.css'
// 引入redux
import