react 应用部署到gitee
时间: 2023-03-06 16:21:17 浏览: 90
将React应用部署到Gitee Pages需要完成以下步骤:
1. 创建 Gitee Repository
首先,您需要在Gitee上创建一个仓库。如果已经有一个仓库,请跳过此步骤。
2. 创建 React 应用
在本地计算机上创建一个React应用。您可以使用Create React App脚手架来创建React应用。
3. 构建 React 应用
在您的本地计算机上,进入React应用的根目录,并运行以下命令来构建React应用:
```
npm run build
```
该命令将生成一个build文件夹,其中包含要部署到Gitee Pages的所有文件。
4. 部署到 Gitee Pages
将build文件夹中的所有内容复制到您的Gitee仓库的master分支中。
```
cp -r build/* /path/to/gitee/repository
```
5. 启用 Gitee Pages
进入您的Gitee仓库,点击“Settings”,然后在左侧菜单中选择“Pages”。
在“Pages”页面上,选择“master”分支作为源,选择“/”作为路径,并单击“保存”按钮。
6. 访问 Gitee Pages
在页面上方的提示中,您可以找到您的React应用的URL。如果您的React应用是单页应用程序,可以直接使用该URL访问您的应用。
如果您的React应用需要使用路由,您需要将路由配置添加到您的Gitee Pages上。
在您的React应用中安装react-router-dom:
```
npm install react-router-dom --save
```
添加路由配置,例如:
```jsx
import { BrowserRouter, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</BrowserRouter>
);
}
```
在您的Gitee Pages中创建一个404.html文件,然后在该文件中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Page not found</title>
<meta http-equiv="refresh" content="0; URL='/'" />
</head>
<body>
<h1>Page not found</h1>
<p>The page you are looking for does not exist.</p>
<p>You will be redirected to the home page in a few seconds...</p>
</body>
</html>
```
该代码将在找不到页面时重定向到主页。
现在,您可以使用Gitee Pages上的URL访问您的React应用,并在浏览器中查看路由的工作情况。