我有一个使用 Azure Static Web App 部署的 vue 项目。项目包含路由器(历史模式)功能。它在本地运行完美。但部署到 Azure 路径链接后无法正常工作。例如,当我尝试从浏览器导航访问 mysite.com/about 时,它会返回 404 错误。
public 文件夹中的 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
正如其他人提到的,不推荐将“routes.json”添加到公共文件夹 https://github.com/Azure/static-web-apps/wiki/routes.json-reference-(deprecated)。但是,如果您是新来的并查看以前的答案,那么您对新实践的了解就会变得更糟。
您正在寻找的答案是Azure 静态 Web 应用程序配置文件。该文件应放置在您的应用程序的根目录下,名为staticwebapp.config.json
.
这是一个例子 https://learn.microsoft.com/en-gb/azure/static-web-apps/configuration#example-configuration-file它可以包含什么,来自文档。
对于单页应用程序,您最感兴趣的是捕获服务器“不知道”的路由以及应排除哪些路径。
以下是 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"
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)