react打包服务器文件,react项目搭建及打包发布

一、创建项目

1.npm install -g create-react-app；

2.create-react-app my-app(my-app为项目名字)；

这样一个react项目就初始化好了，运行npm start启动项目可查看，接下来可以配置路由。

二、多页面路由

1.安装React Router

React Router已被拆分成三个包：react-router,react-router-dom和react-router-native。你不需要直接安装react-router，react-router包提供核心的路由组件与函数。其余两个提供运行环境(浏览器与react-native)所需的特定组件，但是他们都暴露出react-router中暴露的对象与方法。你应该为你的环境选择正确的包。我们进行的是网站(将会运行在浏览器)构建，所以应安装react-router-dom。

npm install -save react-router-dom

当进行新项目时，你需要选择使用哪种路由。对于浏览器项目(网站)，react-router4提供了和两个组件。前者在你有服务器处理动态请求的时候使用，后者在静态网站的时候使用。

通常我们选择使用，但是如果你的网站将运行在只有静态文件的服务器上，是一个不错的方案。

对于我们的项目，我们假设我们的网站将架设在动态服务器上，所以我们选择的路由组件是

2.创建路由，使用Link来进行路由导航

在src目录下新建Routes.js文件，定义路由：

修改App.js文件：

修改src目录下的index.js文件：

这样路由就配置好了，在页面中可以用Link标签进行跳转：

现在一个简单的demo就完成了，接下来是打包发布。

三、打包

在项目目录下，运行npm run build，进行打包，打包完成后会在目录下生成一个build文件夹，build生成的这些东西要放在服务器root下。

四、布署

布署的时候你必须把build里的文件直接放到服务器的根路径下，比如，你的服务器IP是47.96.134.256，应用服务器端口为8080，你应该保证http://47.96.134.256:8080这种访问方式，访问到的是你的build下的文件。如果你希望以http://47.96.134.256:8080/build/index.htm这种方式访问应用，那么你可以在package.json文件中增加一个homepage字段：

"homepage": ".",