React-Webpack-production 构建不适用于 nginx答案

【问题标题】：React-Webpack-production build is not working on nginxReact-Webpack-production 构建不适用于 nginx
【发布时间】：2022-01-22 21:56:45
【问题描述】：

我在反应应用程序中使用 webpack 5.64.1。在我运行命令“npm run build”之后。我在我的项目中获得构建文件夹。我将 build 文件夹中的所有文件上传到 /usr/share/nginx/html/

这是我的 nginx 配置文件

server {
    listen       80;

    listen 443 ssl;

    server_name *********;
    
    ssl_certificate /etc/ssl/certs/fullchain.pem;
    ssl_certificate_key /etc/ssl/certs/privkey.pem;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    
    location / {

        try_files $uri /index.html;

    }
    
    access_log /var/log/nginx/*****-access.log;
    error_log /var/log/nginx/******.com-error.log;
}

当我使用浏览器访问我的网站时，它会在控制台中生成以下错误

1-Uncaught SyntaxError: Unexpected token '

在检查了它的网络选项卡后，我意识到这些文件的预览不可用。虽然这些返回 200 状态代码。

提前谢谢你

【问题讨论】：

标签： reactjs nginx webpack webpack-dev-server

【解决方案1】：

你有没有先在public/文件夹下创建manifest.json文件？

这是示例 manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

【讨论】：