QuasarFramework(Vue.js)をWebpackで、buildしたときに発生したUncaught SyntaxError: Unexpected token < を解決したときの話

QuasarFramework(Vue.js) + Firebaseで、アプリケーションを作っているときに、Uncaught SyntaxError: Unexpected token <が発生してしまったんですが、それを解決した時の話です。

症状編

QuasarFramework(Vue.js) + Firebaseで、アプリケーションを作っているときに、vue-routerの設定をhistoryモードにして、Build後のファイルをFirebaseにデプロイしたところ、vue-routerで設定したchildrenのrouteにアクセスすると以下のエラーが発生してしまいました。

Uncaught SyntaxError: Unexpected token < manifest.js
Uncaught SyntaxError: Unexpected token < app.js
Uncaught SyntaxError: Unexpected token < vendor.js

そのときの、routes.jsの設定は以下のようにしていました。

routes.js

...
export default new VueRouter({

  // history modeにしてあります。
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),

  routes: [
    { path: '/dashboard',
      component: load('HelloTop'),
      children: [
        { path: 'hello', component: load('Hello2') }
      ]
    },
    { path: '/', component: load('Hello') },
    // { path: '/', component: load('Hello') },
    // Always leave this last one
    { path: '*', component: load('Error404') } // Not found
  ]
})
...

この場合、childrenの/dashboard/hello にアクセスすると、上記のerrorが発生するという状況です。

原因編

errorの内容は、manifest.js, app.js, vendor.jsのファイルの参照に失敗しているっぽいので、この参照の設定を正しくしてあげる必要があるようです。

なぜ参照errorが発生しているのかを調べたところ、stack over flowに、原因と解決方法の回答がありました。
https://stackoverflow.com/questions/41756874/uncaught-syntaxerror-unexpected-token-in-dist-index-html?answertab=active#tab-top

完全には理解してないですが、まとめると
「index.htmlのscriptのURLが絶対pathになっていない場合は、ブラウザの挙動によって、scriptファイルを相対パスで参照してしまうことがあるので、scriptのURLを絶対pathに変更してあげたら問題が解決するよ」
ということらしいです。

今回の例だと、/dashboard/helloにアクセスしたあとは、manifest.js, app.js, vendor.jsの参照URLが、/dashboard/manifest.jsとかになってしまい、うまくファイルを読み込めないという状況になっているぽいです。（たぶん）

解決編

解決策も先程のstackoverflowの回答欄にありました。
index.jsの、buildのpublicPathを、/に修正するだけでOKのようです。

index.js

...
build: {
    env: require('./prod.env'),
    publicPath: '/',
    productionSourceMap: false,

    // Remove unused CSS
    // Disable it if it has side-effects for your specific app
    purifyCSS: true
  },
...

もしくは、routes.jsのmodeをhashに戻せば、相対パスのままでもOKのようです。

まとめ

modeをhistoryにしたところ思わぬところで、errorが出てしまいました。うまく解決できて良かったですが、そもそもmodeのhashとhistoryの違いもよくわからないまま、historyにしてしまったところが原因かもしれません。