Vue于React特性对比(四)
新开了一个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特性对比(四)的更多相关文章
- Vue于React特性对比(三)
最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...
- Vue于React特性对比(二)
一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...
- Vue和React的对比
今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧 1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是 ...
- Vue于React特性简单对比(一)
一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...
- vue和react全面对比(详解)
vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- Vue和React对比
Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
随机推荐
- leetcode-88. 合并两个有序数组 · Aaray
题面 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 样例 1. 输入: nums1 = [1,2,3,0,0,0], m ...
- centos根目录扩容,home目录减小容量
参考: https://blog.csdn.net/evandeng2009/article/details/49814097 主要命令: 15 cd / 16 ll 17 mkdir backup ...
- 第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
目录 vue项目创建 环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...
- FreeRTOS列表和列表项
FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...
- nginx简单反向代理实例
一.要做什么? 实例最后实现的效果图: 我们在浏览器地址栏上输入 wangtong,代理服务器获取请求,将请求转发至指定的 tomcat 上 二.怎样做? 1.准备环境 虚拟中中需要安装 JDK+To ...
- 查看python和NumPy版本和安装路径
记录查看Python和NumPy版本以及路径的几条命令 # 查看Python版本及路径 python -V python -c "import sys;print(sys.executabl ...
- 【python】发送邮件,含附件
def send_mail(_user,_pwd,_to): # f = open(file_new,'rb') # mail_body = f.read() # f.close() # 读取最新测试 ...
- python中的几种数据类型(一)
一.整型(数字) python2中有长整形long python3 中全都是整型 int n = 56 print(n.bit_length()) # 0011 1000 # 12 ...
- [Google Guava] 8-区间
原文链接 译文链接 译文:沈义扬 范例 1 List scores; 2 Iterable belowMedian =Iterables.filter(scores,Range.lessThan(me ...
- [Flutter] Stack Layout
Normally if you place three the same size icons in a stack, they will stands on top of each other, t ...