React APP项目启动(环境配置)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_44195250/article/details/100051174

1、cnpm install create-react-app -g
2、我做的是贝贝
create-react-app beibei
3、安装好了就是这个亚子的
cb beibei 进入这个文件 然后yarn start 开启看看能不能正常运行
在这里插入图片描述
安装依赖:
在这里插入图片描述
代码:

add react-router-dom redux react-redux redux-thunk redux-actions styled-components react-loadable whatwg-fetch qs

开发环境依赖:
在这里插入图片描述
创建文件夹
在这里插入图片描述

代码:

yarn add react-app-rewired customize-cra babel-plugin-import http-proxy-middleware --dev

更改package.json文件
在这里插入图片描述
新建config-overrides.js文件
代码:

 const { override, addWebpackAlias } = require('customize-cra');
 const path = require("path");
module.exports = override(
  
    //别名配置
    addWebpackAlias({        
        ["@"]:path.resolve(__dirname,"./src"),
        ["@actions"]:path.resolve(__dirname,"./src/actions"),
        ["@api"]:path.resolve(__dirname,"./src/api"),
        ["@common"]:path.resolve(__dirname,"./src/common"),
        ["@components"]:path.resolve(__dirname,"./src/components"),
        ["@layout"]:path.resolve(__dirname,"./src/layout"),
        ["@pages"]:path.resolve(__dirname,"./src/pages"),
        ["@router"]:path.resolve(__dirname,"./src/router"),
        ["@static"]:path.resolve(__dirname,"./src/static"),
        ["@store"]:path.resolve(__dirname,"./src/store"),
        ["@utils"]:path.resolve(__dirname,"./src/utils"),
        ["@lib"]:path.resolve(__dirname,"./src/lib"),
    })
);

创建setupProxy.js文件(跨域用的)
代码:

const proxy = require("http-proxy-middleware");

module.exports = (app)=>{
    app.use(proxy("/martgoods",{
        target:"https://dsapi.beibei.com",
        changeOrigin:true,
    }))
}

猜你喜欢

转载自blog.csdn.net/weixin_44195250/article/details/100051174