サブディレクトリから配信するVue.jsルート

Question

ステージングサーバーのサブディレクトリからVue.jsアプリケーションを提供したいと思います。例：http://url.com/subdir/app/

私はこれを行い、そのフォルダから配信するためにbuild config assetsPublicPathを設定すると、すべてのアセットは正常に配信されますが、私のアプリケーションは正しくルーティングされません。 「ホーム」ページは、「キャッチオール」にルーティングされ、そして任意の更なるルートは単にここで、通常のホワイトページ404

は私のルータであることを示します：

export default new Router({ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     component: ContentView, 
     children: [ 
      { 
       path: '/', 
       name: 'DataTable', 
       component: DataTable, 
       meta: { requiresAuth: true } 
      }, 

      // =================================== 
      // Login 
      // =================================== 
      { 
       path: '/login', 
       name: 'AppLogin', 
       component: AppLogin, 
       meta: { checkAlreadyLoggedIn: true } 
      }, 
      { 
       path: '/logout', 
       name: 'AppLogout', 
       component: AppLogout, 
       meta: { requiresAuth: true } 
      } 
     ] 
    }, 
    { 
     path: '*', 
     component: ContentView, 
     children: [ 
      { 
       path: '/', 
       name: 'NotFound', 
       component: NotFound 
      } 
     ] 
    } 
]}) 

そしてここでは、必要な設定です/index.jsの変更点：assetsPublicPath: '/subdir/app/'

ルートが正常に動作します。しかし、ステージングサーバー上ですべての静的資産、構築されたJSとCSSなどはすべて正常に機能します。しかし、ホームルートはキャッチオールを示しています。ルートが正しく設定されていないか、本番環境のサブディレクトリからサービスを提供する必要があるためです。

Answer 1

assetsPublicPath設定はwebpackアセット用です。 vue-routerの場合は、コンストラクタでbaseオプションを設定する必要があります。

は、ドキュメントを参照してください：https://router.vuejs.org/en/api/options.html#base