react中craco配置解决跨域、打包、@、等问题

在项目中新建 craco.config.js

• craco引入react 项目的配置在如何在react内使用@符号作为src文件 项目中有讲解，请移步观看。

1、@符号作为src文件

const path = require('path')
module.exports = {
    webpack: {
        //@符号作为src文件
        alias: {
            '@': path.join(__dirname, 'src')
        },
    }
}

2、配置代理

const path = require('path')
module.exports = {
    //配置代理解决跨域
    devServer: {
        port: 3009,
        proxy: {
            '/api': {
                target: 'http://114.215.183.171:5002',
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/api"
                }
            },
        }
}

3、build打包文件名称更改

const path = require('path')
module.exports = {
    webpack: {
        // 更改build打包文件名称为dist
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.output.path = path.resolve(__dirname, 'dist')
            paths.appBuild = path.resolve(__dirname, 'dist')
            return webpackConfig
        },
    },
}

参考文档：react中craco配置更改打包文件名称and配置代理解决跨域问题