部署后未加载映像- React - Azure静态Web应用

x759pob2  于 2023-03-31  发布在  React
关注(0)|答案(1)|浏览(131)

我正在构建一个react + typescript网站,并使用azure静态web应用程序部署了该应用程序。
在localhost上,一切都按预期工作,但在发布的环境中,没有显示应用程序图像。查看控制台,我得到以下错误:
console error
没有png,svg,gif...加载,但它在localhost上工作。
我试着按照以下的说明去做:
https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#fallback-routes
但没有成功。
这是我第一次在azure上部署应用程序,我不知道添加更多信息是否重要。
感谢所有帮助。
我的包裹

{
  "name": "yarn",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@anatoliygatt/dark-mode-toggle": "^1.0.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/draft-js": "^0.11.10",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "@types/victory": "^35.0.0",
    "axios": "^1.3.0",
    "crypto-js": "^4.1.1",
    "draft-js": "^0.11.7",
    "draft-js-export-html": "^1.4.1",
    "env-cmd": "^10.1.0",
    "keycloak-js": "^20.0.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-aws-s3": "^1.5.0",
    "react-aws-s3-typescript": "^1.1.5",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-hot-toast": "^2.4.0",
    "react-icons": "^4.6.0",
    "react-loading": "^2.0.3",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "react-select": "^5.6.1",
    "react-toggle": "^4.1.3",
    "styled-components": "^5.3.6",
    "typescript": "^4.8.4",
    "victory": "^36.6.8",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build:dev": "env-cmd -f .env.development yarn run build",
    "build:homolog": "env-cmd -f .env.homolog yarn run build",
    "build:prd": "env-cmd -f .env.production  yarn run build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "index.js",
  "author": "João Victor Simonassi",
  "license": "MIT",
  "devDependencies": {
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-toggle": "^4.0.3",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "eslint": "^8.27.0",
    "eslint-plugin-react": "^7.31.10",
    "file-loader": "^6.2.0"
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

我的Azure管道任务:
azure tasks

luaexgnf

luaexgnf1#

在Static WebApps上,您将在staticwebapp.config.json文件中定义Azure Static Web Apps的配置,该文件控制mimeTypes -请尝试添加缺少的文件类型,然后进行检查。
在此处查看示例配置文件:配置文件示例

"mimeTypes": {
 ".json": "text/json"
 }
}

staticwebapp.config.json的推荐位置是在工作流文件中设置为app_location的文件夹中。但是,该文件可以放置在设置为app_location的文件夹中的任何子文件夹中。
我知道你已经检查了路由设置-只是确认一下,如果你已经通过“navigationFallback”在staticwebapp.config.json文件中添加了回退路由。
参见:https://learn.microsoft.com/azure/static-web-apps/configuration#fallback-routes

{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
 }
}

此外,请按照本文档所述,查看路由中文件扩展名的任何过滤器。

相关问题