Javascript 在Azure静态web应用程序中，重新加载路由返回404错误
我在azure静态web app中部署了一个Angular应用程序，但我遇到了一个错误，当我重定向到某些路由时，它会返回404错误，但如果我在web应用程序中，并且我从一个路由转到另一个路由，那么它会工作。 我试图更改index.html中的baseRef，但没有成功 当地的一切都按预期进行 我使用了Javascript 在Azure静态web应用程序中，重新加载路由返回404错误,javascript,angular,typescript,azure-web-app-service,Javascript,Angular,Typescript,Azure Web App Service,我在azure静态web app中部署了一个Angular应用程序，但我遇到了一个错误，当我重定向到某些路由时，它会返回404错误，但如果我在web应用程序中，并且我从一个路由转到另一个路由，那么它会工作。 我试图更改index.html中的baseRef，但没有成功 当地的一切都按预期进行 我使用了ngbuild--prod来部署应用程序 我在Azure Web Static中使用Linux作为服务器，部署过程位于yml文件中 我看过微软的文档，但不太懂 name: Azure Static
ngbuild--prodymlname: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RED_BAY_017ABB010 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RED_BAY_017ABB010 }}
action: "close"
angular.json{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"smart-career-ng": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"lodash",
"jwt-decode"
],
"aot": true,
"outputPath": "dist/smart-career-ng",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/intl-tel-input/build/css/intlTelInput.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/cropperjs/dist/cropper.min.css",
"./node_modules/quill-emoji/dist/quill-emoji.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/cropperjs/dist/cropper.js",
"node_modules/popper.js/dist/umd/popper.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "smart-career-ng:build"
},
"configurations": {
"production": {
"browserTarget": "smart-career-ng:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "smart-career-ng:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"smart-career-ng-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "smart-career-ng:serve"
},
"configurations": {
"production": {
"devServerTarget": "smart-career-ng:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "smart-career-ng",
"cli": {
"analytics": false
}
}
web.config<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/src/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
由于应用程序的基本URL是直接的，您必须在重写标记中放置“/”而不是/src/index.html。请在web配置文件中尝试以下代码。 如需参考，请点击以下链接：
对于所有将看到问题的人，这里是答案 您需要在资产下创建一个名为
routes.json{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}
然后您构建项目并部署到Azure静态Web应用程序我没有IIS服务器，Azure中的所有服务器都部署为Azure静态Web。但是Web配置语法和所有配置都与IIS类似。对不起，如果这是错误的，我想你会试试的。谢谢谢谢你，所以muchI能修好它。哦，太好了，你是怎么做到的？哦，太好了@Abedin.Zhuniqi。谢谢分享。
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}