新开了一个vue的项目,从vue单页面框架搭建到单点登录接入都是自己负责搞的。然后准备将这套东西迁移到react上。然后有了这篇文章。

1,reactjs分环境打包明显要比vue更为麻烦

vue修改的东西比较简单。但reactjs如果不进行eject,只能在引入一个社区解决方案

 react-app-rewired

  然后react-app-rewired发挥作用,还需要一个配套的配置文件config-overrides.js放置在根目录下,代码

module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};

   然后建立不同环境下的参数数据:比如需要三个环境分别为开发,测试,上线,那就需要三个文件分别为.env.development  .env.test  .env.production。同时

内部的参数需要使用固定前缀REACT_APP_‘具体参数名’

然后在修改原来的命令行命令,package.json修改部分代码

"scripts": {
"start": "dotenv -e .env.development react-app-rewired start",
"build:prod": "dotenv -e .env.production react-app-rewired build",
"build:test": "dotenv -e .env.test react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
},

  显然需要安装dotenv-cli。

这些配置之后就可以通过process.env.参数名拿到变量值了。

当然也可以对create-react-app创建的项目模板进行eject,然后只需要在不同的构建文件也就是

文件进行不同环境下的变量设置就可以了,同样要以REACT_APP_开头,上面图片中的pre是我创建的仿真环境。

对比:vuec-li创建的项目模板针对不同环境的分包打包

这里面是一个导出一个对象,针对不同的环境,然后修改

将env变量原来的设置注释,修改为如下

// const env = require('../config/prod.env')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')

  二者对比,vue简单许多。不需要额外的配置项。

2,create-react-app没有全局拦截器这种现成的api,而vue-cli直接封装好了

3,create-react-app不可以直接写css,而.vue文件可以

待续……

Vue于React特性对比(四)的更多相关文章

  1. Vue于React特性对比(三)

    最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...

  2. Vue于React特性对比(二)

    一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...

  3. Vue和React的对比

    今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧 1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是 ...

  4. Vue于React特性简单对比(一)

    一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...

  5. vue和react全面对比(详解)

    vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...

  6. vue、React Nactive的区别(转载)

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  7. Vue和React对比

    Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...

  8. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

  9. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

随机推荐

  1. stm32 RS485 SP3485

    RS485 是半双工通信(2 线制) SP3485芯片的DE与RE短接在一起连接在STM32F1芯片的PG3上,通过PG3管脚就可以控制 SP3485的收发,当PG3=0时,为接收模式,当PG3=1时 ...

  2. Android写入文件电脑看不到

    原因是因为没有刷新,写入文件后执行以下代码即可. 根目录路径: File newfile = new File(Environment.getExternalStorageDirectory() + ...

  3. svm 简单明了的入门级使用教程(转载)

    如何使用libsvm进行分类   这帖子就是初步教教刚接触libsvm(svm)的同学如何利用libsvm进行分类预测,关于参数寻优的问题在这里姑且不谈,另有帖子详述. 其实使用libsvm进行分类很 ...

  4. 1.NoSQL入门和概述

    入门概述: 1.为什么要用到NoSQL a)  单机MySQL的美好年代,在90年代,一个网站的访问量一般都不大,用单个数据库完全可以轻松应付.在那个时候,更多的都是静态网页,动态交互类型的网站不多. ...

  5. 虚拟机ipv6环境搭建操作指南

      一.vmware的相关配置 (1)点击编辑,选择虚拟网络编辑器 (2)选择带NAT模式的VMnet8网络,点击NAT设置 (3)在NAT设置中启用IPV6 (4)设置好后,点击应用 (5)再选择镜 ...

  6. Lua 学习之基础篇七<Lua Module,Package介绍>

    Lua 之Module介绍 包管理库提供了从 Lua 中加载模块的基础库. 只有一个导出函数直接放在全局环境中: [require]. 所有其它的部分都导出在表 package 中. require ...

  7. c#动态调用WEBSERVICE接口

    C#动态webservice调用接口 1 using System; 2 using System.Collections; 3 using System.IO; 4 using System.Net ...

  8. BZOJ 3218 A + B Problem (可持久化线段树+最小割)

    做法见dalao博客 geng4512的博客, 思路就是用线段树上的结点来进行区间连边.因为有一个只能往前面连的限制,所以还要可持久化.(duliu) 一直以来我都是写dinicdinicdinic做 ...

  9. mapbox-gl空间分析插件turf.js使用介绍

    mapbox-gl能够方便地显示地图,做一些交互,但是缺少空间分析功能,比如绘制缓冲区.判断点和面相交等等. turf.js是一个丰富的用于浏览器和node.js空间分析库,官网 http://tur ...

  10. sql server 复习笔记2

    主键约束 可以通过定义primary key 约束来定义主键, 用于强制表的实体化完整性,一个表只能有一个主键约束, 并且primary key 约束中的列不能为空值,由于primary key 约束 ...