NUXT-加载资源失败：服务器以404状态响应

Question

我正在努力部署nuxt create-app。

实际上，当我运行$ npm run generate时，它会生成一个dist文件夹，该文件夹的_nuxt/文件夹路径不正确。

实际上，.html文件上的正确相对路径应该是_nuxt/test.js而不是/_nuxt/test.js（没有第一个“ /”），因为它将在根目录中搜索文件。

我已经搜索了几个小时，但是找不到有效的解决方案。我找到了此Errors when publishing my nuxtjs website on SSR mode，但真诚的我不知道如何实现它，ngix是什么？我必须修改什么文件？我不知道

在我的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
        }
      }
    }

  }
}

[请帮助我最终解决这个噩梦。非常感谢，

Answer 1

您应使用以下配置

  const pkg = require('./package')

    module.exports = {
      mode: 'spa',
    router: {
    base: '/',// for base path
  },
      /*
      ** 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: {
    publicPath: 'public/',
        /*
        ** 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
            }
          }
        }

      }
    }

Answer 2

我不确定哈桑如何通过构建设置为您解决：publicPath为“公开”。

就我而言，我只是将public/替换为.nuxt/dist/client/，对我来说很有效。

p.s.nuxt/是不​​可见的文件夹。