如何解决带有 Vue 项目路由的 Azure 静态 Web 应用程序不起作用
我有一个使用 Azure 静态 Web 应用部署的 vue 项目。项目包含路由器(历史模式)功能。它在本地运行完美。但是在部署到 Azure 路径后,链接无法正常工作。例如,当我尝试从浏览器导航访问 mysite.com/about 时,它返回 404 错误。
public 文件夹中的 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
目录中创建一个名为 public
的文件,并添加:
{
"routes": [
{
"route": "/*","serve": "/index.html","statusCode": 200
}
]
}
,
刚刚添加了 navigationFallback 属性,现在可以使用了!!!
{
"routes": [
{
"route": "/*","statusCode": 200
}
],"navigationFallback": {
"rewrite": "/index.html","exclude": ["/images/*.{png,jpg,gif}","/css/*"]
}
}
,
正如其他人提到的,adding "routes.json" to your public folder is deprecated。但是,如果您刚来这里并查看以前的答案,那么您对新做法的了解会更糟。
您正在寻找 Azure 静态 Web 应用配置文件的答案。该文件应放置在名为 staticwebapp.config.json
的应用程序的根目录下。
Here's an example 它可以包含的内容,来自文档。
对于单页应用程序,您最感兴趣的是捕获服务器“不知道”的路由以及应排除哪些路径。
这是一个 Vue 应用程序的示例文件:
(如果您没有应该以特殊方式运行的路由,则不必指定它们)
{
"globalHeaders": {
"content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
},"navigationFallback": {
"rewrite": "/index.html","exclude": ["/img/*.{png,gif,webp}","/css/*"]
},"mimeTypes": {
"custom": "text/html"
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。