React,create-react-app脚手架项目,打包上传到服务器

项目使用create-react-app创建的
 

1. 打开package.json。
2. 在"name"同级 上添加一个 “homepage”: “.” （如果已经存在则替换）

{
"name": "client",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {...后面还有很多 省略}
}

1. 保存之后 使用 npm run build 运行。
2. 在根目录下会生成一个打包好的 build 文件。
3. 将 build 这一个文件放到服务器上面(Tomcat,Apache,Nginx)中 ，就可以根据服务器地址访问了。
    
    
    
   如果以上操作执行之后还是不行的话，可以按照顺序试一下下面这两个。
    

1.将路由部分的BrowserRouter更换为HashRouter ； 使用HashRouter来代替BrowserRouter进行使用
 
import {BrowserRouter，HashRouter}from ‘react-router-dom’;

render() {
return (
<Provider store={store} >
<BrowserRouter>              //改这里
<Header/>
<Switch>          {/*从第一个开始匹配，匹配到了就停止*/}
<Route path='/' exact component={Home}/>
<Route path='/ListPage' exact component={ListPage}/>
<Route path='/HtmlPage' exact component={HtmlPage}/>
<Redirect path="/" to={{pathname: '/'}} />     {/*重定向*/}
{/*<Route  exact component={Home}/>*/}{/*设置默认*/}
</Switch>
<Footer/>
</BrowserRouter>               //改这里
</Provider>
);
}

更改之后

render() {
return (
<Provider store={store} >
<HashRouter>         //改这里
<Header/>
<Switch>          {/*从第一个开始匹配，匹配到了就停止*/}
<Route path='/' exact component={Home}/>
<Route path='/ListPage' exact component={ListPage}/>
<Route path='/HtmlPage' exact component={HtmlPage}/>
<Redirect path="/" to={{pathname: '/'}} />     {/*重定向*/}
{/*<Route  exact component={Home}/>*/}{/*设置默认*/}
</Switch>
<Footer/>
</HashRouter>             //改这里
</Provider>
);
}

如果还是不行再试这个：
1.打开node_modules/react-scripts/config/paths.js 在第45行 把pathname后面的 ’ / ’ 改为 ’ . / ’

function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');  //这里这个
return ensureSlash(servedUrl, true);
}