带有Vue项目路由的Azure静态Web应用程序不工作

Question

我有一个使用Azure静态Web应用程序部署的vue项目。项目包含路由器(历史模式(功能。它在本地非常适用。但在部署到Azure后，路径链接无法正常工作。例如，当我尝试从浏览器导航访问mysite.com/about时，它返回404错误。

公用文件夹中的staticwebapp.config.json文件：(我从微软文档中获取了这个例子(

{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}

我的路由器js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/api',
name: 'Api',
component: () => import('../views/Api.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

Answer 1

正如其他人所提到的；routes.json"；到您的公用文件夹。然而，如果你是新来的，看看以前的答案，你会对新的做法感到更糟。

您要查找的答案是Azure静态Web应用程序配置文件。该文件应该放在名为staticwebapp.config.json的应用程序的根目录下。下面是一个文档中可以包含的内容的示例。

对于单页应用程序，您最感兴趣的是捕获服务器"；不知道"；以及应当排除哪些路径。

以下是Vue应用程序的示例文件：

(如果您没有应该以特殊方式运行的路由，则无需指定它们(

{
"globalHeaders": {
"content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
},
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/img/*.{png,jpg,gif,webp}", "/css/*"]
},
"mimeTypes": {
"custom": "text/html"
}
}

Answer 2

在public目录中创建一个名为routes.json的文件，并添加以下内容：

{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}

文档

Answer 3

刚刚添加了navigationFallback属性，现在它可以工作了！！！

{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}

], 

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

}

Answer 4

只需创建一个名为staticwebapp.config.json的文件，并将其放置在应用程序的根目录中。然后粘贴下面的代码。请查看此视频或azure文档以获得帮助。

{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["*.{css, svg, js, ts, png, jpeg, jpg, ico}"]
}
}