码迷,mamicode.com
首页 > 其他好文 > 详细

react不适用npm run eject生成隐藏配置文件来配置

时间:2020-06-26 20:14:33      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:div   add   相关配置   geo   import   path   config   按需加载   rewrite   

1.需要引入 react-app-rewired与customize-cra包配合使用

npm install react-app-rewired customize-cra

2.在src目录下创建config-overrides.js文件

module.exports = function override(config, env) {
  // 关于webpack的相关配置
  return config;
};

3.引入antd框架按需加载

npm install babel-plugin-import

3.1 在config-overrides.js里配置

const {override,fixBabelImports} = require(‘customize-cra‘)

module.exports = override(
    /**
     * @Descripttion: 按需加载antd
     * @param {type} 
     * @return: 
     */    
    fixBabelImports("import",{
        libraryName:"antd",
        libraryDirectory:‘es‘,
        style:‘css‘,
    }),
)

4.引入less配置

npm install less less-loader

4.1 在config-overrides.js里配置

const {override,fixBabelImports,addLessLoader} = require(‘customize-cra‘)

module.exports = override(
    /**
     * @Descripttion: 按需加载antd
     * @param {type} 
     * @return: 
     */    
    fixBabelImports("import",{
        libraryName:"antd",
        libraryDirectory:‘es‘,
        style:true,
    }),
    /**
     * @Descripttion: 配置less 
     * @modifyVars: 主题配置
     * @return: 
     */
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { ‘@primary-color‘: ‘#1DA57A‘ },
    })
)

 5. 解决跨域问题 

npm install http-proxy-middleware

  5.1 需要在src 目录下创建 setupProxy.js文件

const proxy = require(‘http-proxy-middleware‘)

module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware(‘/api‘, {
      target: ‘http://xxxxx:12306/‘,
      changeOrigin: true,
      pathRewrite: {
        ‘^/api‘: ‘‘
      }
    })
  )
}

 

react不适用npm run eject生成隐藏配置文件来配置

标签:div   add   相关配置   geo   import   path   config   按需加载   rewrite   

原文地址:https://www.cnblogs.com/wangyisu/p/13195989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!