我有一个使用 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
将“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"
}
}
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}
}