react build后，后台运行404

Question

如题，
原因应该是前端配置的路由，在本地运行时跳转都由前端的路由控制的，
放到8080服务器上后，是先向服务器发出url请求然后返回，所以404。

查过方法好像要用到webpack，
试着安装后运行报错了

PS C:\workspace_react\ecommercesystem> npm run build

> ecommercesystem@0.1.0 build C:\workspace_react\ecommercesystem
> webpack

[webpack-cli] Compilation finished
assets by status 325 bytes [cached] 1 asset
./src/index.js 315 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 9:2
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(
>   <BrowserRouter>
|     <App />
|   </BrowserRouter>,

webpack 5.2.0 compiled with 1 error in 253 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ecommercesystem@0.1.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ecommercesystem@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\juse\AppData\Roaming\npm-cache\_logs\2020-10-26T04_51_57_914Z-debug.log

webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
}

这该怎么解决？

404那个问题

我参考的是这篇文章
转载 https://www.cnblogs.com/YZH-chengdu/p/6855237.html

他那串代码我该怎么改，写在哪里？

Answer 1

参考GPT和自己的思路：

根据你提供的信息来看，错误信息显示的是缺少 appropriate loader 来处理 index.js 中的代码。解决该问题可以尝试在 webpack.config.js 文件中添加 babel-loader。更新后的 webpack.config.js 文件修改如下：

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader'
    },{
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=25000'
    }]
  }
}

同时，还需要在 package.json 文件中增加 babel-loader 的依赖。在 dependencies 中添加 "babel-loader": "^8.0.6" 即可。添加后的 package.json 文件示例如下：

{
  "name": "ecommercesystem",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "axios": "^0.19.2",
    "babel-loader": "^8.0.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

至于关于 404 问题的解决，你需要在你的服务器上配置反向代理，让所有的请求都指向打包后的 index.html 文件即可。例如使用 Nginx 配置反向代理，可以在 Nginx 的配置文件中添加如下代码：

location / { 
    try_files $uri /index.html; 
}

以上代码的作用是，如果请求的文件不存在，则直接使用 index.html 进行响应。具体实现方法可以根据你的服务器操作系统和服务器软件进行搜索，这里不再赘述。