Vue Router 在 Azure App Service 上不起作用

Question

我正在用vue.js开发网页。vue路由器在调试时运行良好。然而，在部署到Azure应用程序服务时，未找到除根(/(返回404之外的所有页面。

• 我的环境
  • Windows
  • Node.js 16.14.2
  • Vue.js 3.2+TypeScript
  • @vue/cli 5.0.4
  • vue路由器4.0.14

我的源代码如下：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/home/Home.vue';
import Price from '@/components/price/Price.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/price',
name: 'Price',
component: Price
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router

<script setup lang="ts">
</script>
<template>
<div>
<router-view />
</div>
</template>

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index';
import 'windi.css'
createApp(App).use(router).mount('#app')

根页面很好，所以我认为vue路由器正在工作。所以我尝试将根页面的Vue从"主页"更改为"价格"。然后，在根目录(/(中返回"价格"页面。为什么其他页面不起作用？

const routes = [
{
path: '/',
name: 'Home',
component: Price,
},
{
path: '/price',
name: 'Price',
component: Home
},
];

Answer 1

我已将web.config添加到目录'/public/'以解决IIS路由问题。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<rewrite>
<rules>
<rule name="SPA" 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</location>
</configuration>