Vue于React特性对比(四)

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

回到顶部