react build 后打包发布总结

一，部署在apache  web服务器上（wamp   |   xammp）

1.后台接口需要做跨域设置

（1）在服务端利用Access-Control-Allow-Origin响应头解决。

设置Access-Control-Allow-Origin：*，允许所有域名的脚本访问该资源。

如果考虑到安全问题，也可以设置Access-Control-Allow-Origin：www.build.im  允许特定域名访问

（2）服务器做反向代理

2.打包文件单独放置一个服务器

（1）把react  项目  build 打包后 复制build  里面的文件到web服务器的根目录

( 2 ) 同时需要在web根目录放置.htaccess文件，文件内容为：（当服务器出现找不到路由时自动回到index.html  路由由react-router 接管）

附备注：

前端本地开发时会存在跨域问题，如果项目是用creat-react-app cli  创建的，则直接在package.json  文件里添加  api 地址目录即可："proxy"： “www.api.com:8000” 即可解决跨域问题，如果是自己创建的项目

配置好proxy  middlle 中间件 也可以实现代理。本地fecth( ''api/userinfo", fucntion(){} ); 请求会发送到    http://www.online.com:80/api/userinfo  接口上

proxy: {
  '/api)': {
   target: 'http://www.online.com:80/',
   changeOrigin: true
  },
} 
<IfModule mod_rewrite.c>
   Options +FollowSymlinks
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^(.*)$ index.html [QSA,PT,L]
</IfModule>

二，部署在nginx  web 服务器上

try_files指令：配置 nginx/nginx.conf 文件

server {
 ...
 location / {
  try_files $uri /index.html
 }
}

react  build  后的文件包里的文件直接放到  nginx 下的web  目录 即可通过ip  访问

遇到的坑

1、安装使用

npm install -g create-react-app

2、生成新项目

create-react-app my-app

(生成的项目最好不要用驼峰式命名，否则后面生成文件提示也会让你改)

３、进入项目目录并预览

cd my-app
npm start

接下来就可以在你的浏览器中看到效果

用create-react-app脚手架生成的目录简单，没有多余的文件。

但是在打包的时候遇到一点小问题，npm run build后该项目会生成一个build文件，但是我点击其中的index.html文件打开后浏览器是空白页面，这是报的错：

解决办法：在package.json配置文件中加一句："homepage": ".",

这是build之后的路径问题，改为相对路径后再次打开这个index.html文件就可以正常浏览了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Parcel 打包示例(React HelloWorld)

    Parcel 打包特点 极速打包时间 Parcel 使用 worker 进程去启用多核编译.同时有文件系统缓存,即使在重启构建后也能快速再编译. 将你所有的资源打包 Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件. 自动转换 如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码. 配置代码分拆 使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,

  • 浅谈React Native打包apk的坑

    浅谈React Native打包apk的坑

    RN的打包,大家可以根据官网一步一步来,但这里有几个地方注意,一下简单介绍: 生成一个签名密钥 在项目的目录下打开cmd命令窗口输入一下命令运行: keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息.最后它会生成一个叫做my-re

  • 解决webpack -p压缩打包react报语法错误的方法

    解决webpack -p压缩打包react报语法错误的方法

    前言 最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍: 我的webpack配置: var webpack = require('webpack'); //打包less插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //这里的'./css/bundle.css'设置打包地址 var ExtractLess = new ExtractTextPlu

  • webpack打包react项目的实现方法

    webpack打包react项目的实现方法

    1webpack简介 webpack是目前最流行的打包工具之一,是一个为前端模块打包构建而生的工具,它既吸取了大量已有的方案优点和教训,也解决了很多前端开发过程中已有的痛点,如代码的拆分与异步加载,对非js资源的支持,强大的loader设计使得它更像是一个构建平台,而不是打包工具. 2webpack,react开发环境 1)新建一个项目文件夹,进入此文件夹,创建package.json文件(npm init命令) 2)确认已安装webpack,web pack-dev-server模块 3)安装

  • 利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

  • 浅谈React + Webpack 构建打包优化

    浅谈React + Webpack 构建打包优化

    本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化 检查没有使用的库,去除 import 引用 按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是 在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这

  • react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置Access-Control-Allow-Origin:*,允许所有域名的脚本访问该资源. 如果考虑到安全问题,也可以设置Access-Control-Allow-Origin:www.build.im  允许特定域名访问 (2)服务器做反向代理 2.打包文件单独放置一个服务器 (1)把react  项

  • 解决pyinstaller打包发布后的exe文件打开控制台闪退的问题

    解决步骤: 1.先打开一个cmd 2.cd到你的exe文件目录 3.输入    .\***.exe 以上这篇解决pyinstaller打包发布后的exe文件打开控制台闪退的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置   devServer: {     // host: "0.0.0.0", //项目运行时的本地地址     // port: 8880, // 端口号     //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为

  • RN在Android打包发布App(详解)

    1-:生成一个签名密钥 你可以用keytool命令生成一个私有密钥.在Windows上keytool命令放在JDK的bin目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin),你可能需要在命令行中先进入那个目录才能执行此命令.在mac上,直接进入项目根目录输入一下命令: $ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2

  • 浅谈maven 多环境打包发布的两种方式

    集合工程中 maven 的多环境打包发布 在一个项目的开发过程中,我们经常要进行 开发环境 , 测试环境, 正式环境 打包部署,如果每次打包过程中我们都是人为的 根据 不同 环境 去修改一些 配置文件 ,这样不但工作量太庞大,而且还容易出错,而maven的插件正好解决了我们的困扰. 1. maven 聚合工程的创建 创建过程直接忽略,看最终的结果图 第一种方式 2. 不同环境打包的配置 因为要发布一个webapp的主要配置文件集中在 web工程中,故而,相关的配置文件都在 ecps-manage

  • 解决vue 打包发布去#和页面空白的问题

    1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown

  • vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

    Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装: 全局webpack: npm install webpack -g vue脚手架vue-cli: npm install vue-cli -g 安装webp

  • Pyinstaller 打包发布经验总结

    使用Pyinstaller打包Python项目包含了大量的坑,这篇文章总结实践得到的Pyinstaller打包经验.本文的例子为Python3.6代码,Pyinstaller3.4,在windows下打包为64位和32位版本. Pyinstaller基本使用方法 Pyinstaller可以通过简单的命令进行python代码的打包工作,其基本的命令为: pyinstaller -option xxx.py options的详情可参考官方帮助文档https://pyinstaller.readthe

  • 详解JFX11+IDEA跨平台打包发布的完美解决办法

    1 概述 IDEA2020.1的文档中提到只有JFX8的工程才支持打成jar包,并且,如果直接使用Build Artifacts的话,会如下提示: IDEA文档有提到这个的解决办法,是使用一些第三方工具.里面介绍了通过IDEA结合自身/Maven/Gradle打包发布JFX11以上版本的方法.但是,不足的地方有: 直接创建JFX工程默认只有一个src目录,不像Maven工程还带有resources与test,给管理资源文件以及外部依赖造成了困难,getClass().getResource()会

随机推荐