azure - 带有 Vue 项目路由的 Azure 静态 Web 应用程序不起作用
问题描述
我有一个使用 Azure 静态 Web 应用程序部署的 vue 项目。项目包含路由器(历史模式)功能。它在本地完美运行。但是在部署到 Azure 路径链接后无法正常工作。例如,当我尝试从浏览器导航访问 mysite.com/about 时,它返回 404 错误。
公用文件夹中的 staticwebapp.config.json 文件:(我从 microsoft docs 中获取此示例)
{
"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
解决方案
正如其他人所提到的,将“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"
}
}
推荐阅读
- r - 基于字符串拆分R数据框中的文本
- gis - 如何将范围从 EPSG 3857 转换为 EPSG 26331
- javascript - 如何在打字稿中转换对象?
- javascript - 有没有办法获取有关 Puppeteer's Promise 的数据?
- nginx - certbot --nginx 生成 PR_END_OF_FILE_ERROR
- python - 使用 selenium 发送用户名和密码
- sql - 使用 jsreport 的空白 pdf 输出
- api - 来自 MS Graph API 的调用统计错误
- php - 通过循环将一系列 PHP 变量转换为 JSON 对象
- swiftui - 创建 iOS 应用小部件时如何使数据跨文件夹可用?