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特性对比(四) 的全部内容, 来源链接: utcz.com/z/383654.html