SPA 静态 Nuxt 应用程序在通过共享主机部署时无法获取静态文件，但在本地服务器上运行良好

Question

我正在尝试在共享托管服务 (Bluehost) 上托管的子域上部署 SPA nuxt 项目。

我运行 nuxt build && nuxt export 按照 this post 并尝试在本地服务器上提供生成的静态文件 (dist)，它工作正常。

但是一旦我尝试实际部署，页面无法成功加载，我在 Chrome devtools 的网络选项卡中有多个 404，说它无法获取在 _nuxt目录：

runtime.c59f93b.js  
commons.app.db9bcff.js
app.fe0b14c.js

有人碰巧知道是什么原因造成的吗？或者是否需要向 nuxt.config.js 添加任何内容？尝试搜索文档但无济于事。 ff 是我的 nuxt.config.js:

export default {
  mode: 'spa',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  },
  target: 'static'
}

提前致谢。

Answer 1

问题是我试图部署到一个子目录，而不是站点的主目录，所以 Nuxt 试图从错误的目录中获取文件，即

/mainsite/public/commons.app.db9bcff.js

什么时候应该

/mainsite/subdir1/dirname/public/commons.app.db9bcff.js

解决方案是在 nuxt.config.js:

中手动配置 router 属性

router: {
    base: '/subdir1/dirname/'
  }

感谢用户@Rie 指出这个属性最终成为解决方案的人。

SPA 静态 Nuxt 应用程序在通过共享主机部署时无法获取静态文件，但在本地服务器上运行良好

SPA static Nuxt app can't fetch static files when deployed via shared hosting, but runs fine on local server

deployment

request

http-status-code-404

vue.js

nuxt.js