azure - Azure 托管的 Nuxt Vue 网站中的 EISDIR 问题

Question

我在 Azure DevOps 中托管了一个 Web 应用程序，该应用程序是使用 Vue 和 Nuxt 构建的。@vue/cli 5.0.1 和 "nuxt": "^2.15.8"。托管 Web 应用程序工作正常后，我可以登录，然后它会将我导航到列表页面。但是当我刷新页面时，它会显示此错误。 抱歉，请与站点管理员联系以查看浏览器中是否存在错误:EISDIR .. 并在控制台中抛出 500 错误。在我的登录响应中，我仅获得访问 token ，没有刷新 token ，这可能是一个问题吗？或Azure方面的任何其他设置？我们尝试在 azure pm2serve/home/site/wwwroot --no-daemon --spa 中进行设置。但它仍然不起作用。在我的开发环境中一切正常。

export default {
  ssr: false,

  head: {
    title: 'BBG Returns Self Service',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  plugins: ['~/plugins/clearTokens.js'],

  components: true,

  buildModules: ['@nuxtjs/style-resources'],

  env: {
    BASE_URL: 'https://my-api-url',
  },

  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL,
  },

  router: {
    mode: 'history',
  },

  styleResources: {
    // scss: ["~assets/scss/main.scss"],
  },

  modules: ['@nuxtjs/i18n'],

  build: { transpile: [/^@storefront-ui/] },

  server: {
    port: 4200,
  },

  i18n: {
    locales: [
      {
        code: 'en',
        iso: 'en-GB',
        name: 'English',
        file: 'en.json',
        icon: 'uk.svg',
      },
      {
        code: 'de',
        iso: 'de-DE',
        name: 'Deutsch',
        file: 'de.json',
        icon: 'de.svg',
      },
    ],
    lazy: true,
    langDir: 'i18n/',
    defaultLocale: 'en',
    detectBrowserLanguage: false,
  },
  target: 'static',
}

Answer 1

如果部署 SPA 应用，您需要同时具备:

• 目标:'static'(default being 'server')
• ssr: false

这消除了 SEO + 性能方面的一些优势，但至少，您仍然可以获得 Nuxt DX 和生态系统的所有优势。

<小时/>

要将其托管在 Azure 上，您可以采用多种方法(如果您使用的是:):

• 静态应用程序，您可以按照 Azure 静态 Web 应用程序的官方文档进行操作:https://nuxtjs.org/deployments/azure-static-web-apps/
• 一个SSR应用程序，您可以关注这个有关Azure Portal的应用程序:https://nuxtjs.org/deployments/azure-portal