EISDIR issue in Azure hosted Nuxt Vue webiste-CodePudding

I have hosted a Web app in Azure DevOps, the application built with Vue and Nuxt. @vue/cli 5.0.1 and "nuxt": "^2.15.8". After hosting the web application works fine, I can login, then it navigates me to the listing page. But from there when I refresh the page it's showing this error. Sorry, check with the site admin for error: EISDIR .. in the browser and throwing a 500 Error in the console. In my login response I get only access token, there is no refresh token, could that be an issue? or any other settings in the Azure side? We tried setting this in the azure pm2 serve /home/site/wwwroot --no-daemon --spa. Still it's not working. Everything works fine in my dev environment.

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',
}

CodePudding user response：

The actual issue was the Azure configuration. The resource should be created as Static website, then it will work fine.

Please follow this official documentation to understand How to Deploy in Azure. https://nuxtjs.org/deployments/azure-static-web-apps/

CodePudding user response：

If deploying an SPA app, you need to have both:

target: 'static' (the default being 'server')
ssr: false

This removes quite some benefits regarding SEO performance but at least, you still get all the benefits of the Nuxt DX and ecosystem.

To host it on Azure, you have several approaches, if you're using:

a static app, you can follow this official documentation for Azure Static Web Apps: https://nuxtjs.org/deployments/azure-static-web-apps/
a SSR app, you can follow this one about Azure Portal: https://nuxtjs.org/deployments/azure-portal