NUXT - Failed to load resource: the server responded with a status of 404

Question

I'm struggling with the deployment of the nuxt create-app.

In fact, when I run $ npm run generate it generates a dist folder with an incorrect path for _nuxt/ folder.

Infact the correct relative path on .html files should be _nuxt/test.js and not /_nuxt/test.js (without the first "/"), since it will search the files in the root directory.

I have already searched hours and hours but I cannot find a valid solution. I found this Errors when publishing my nuxtjs website on SSR mode but sincerily I don't understand how to implement it, what is ngix? what is the file I must modify? I don't know

Here below my nuxt.config.js

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description },
      { hid: 'keywords', name: 'keywords', content: 'pellet, pellets, madrid, cuenca, segovia, toledo, guadalajara' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'},
      { rel: 'stylesheet', href: 'assets/fonts/fontawesome/css/all.css'}
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    // SCSS file in the project
    '@/assets/css/main.scss'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/vee-validate'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options : {
            fix : true
          }
        })
      }
    },

    /*
    ** POST CSS 
    */
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      //postcss-loader autoprefixer
      plugins: {
       // Disable a plugin by passing false as value 
       // 'postcss-url': false,
       // 'postcss-nested': false,
       // 'postcss-responsive-type': false,
        'postcss-hexrgba': {}
      },
      preset: {
        // Change the postcss-preset-env settings
        autoprefixer: {
          grid: true
        }
      }
    }

  }
}

Please help me to finally resolve this nightmare. Many Thanks,

Answer 1

I'm not sure how is worked out for you Hasan with build settings: publicPath as "public".

In my case I just replaced public/ with .nuxt/dist/client/ and it worked out for me.

p.s .nuxt/ is an invisible folder.