带有 Vue 项目路由的 Azure 静态 Web 应用程序不起作用 [英] Azure Static Web App with Vue project routing not working

问题描述

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

I have a vue project deployed with Azure Static Web App. project contain router (history mode) functionality. It works perfect on local. But after deploying to Azure path links not working correctly. For example when I try to access mysite.com/about from browser navigation it return 404 error.

public 文件夹中的 staticwebapp.config.json 文件:(我从 microsoft docs 中获取此示例)

staticwebapp.config.json file in public folder: (I take this example from 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"；到您的公用文件夹已被弃用.但是，如果您刚来到这里并查看以前的答案，那么您对新做法的了解就会变得更糟.

As others have mentioned, the adding "routes.json" to your public folder is deprecated. However, if you're coming here new and looking at the previous answers you're left for worse on what the new practice is.

您正在寻找 Azure 静态 Web 应用配置文件的答案.该文件应放置在名为 staticwebapp.config.json 的应用程序的根目录下.这是一个示例它可以包含什么，来自文档.

The answer you're looking for a Azure Static Web App Configuration file. The file should be placed at the root of your application called staticwebapp.config.json. Here's an example of what it can contain, from the docs.

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

For single page applications you're mostly interested in catching routes that the server "doesn't know" and which paths should be excluded.

这是一个 Vue 应用程序的示例文件:

Here's an example file for a Vue application:

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

{
  "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"
  }
}

这篇关于带有 Vue 项目路由的 Azure 静态 Web 应用程序不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！