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

Posted 2023-02-22

【中文标题】React-Webpack-production 构建不适用于 nginx

【英文标题】：React-Webpack-production build is not working on 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 状态代码。

提前谢谢你

【参考方案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"