はじめに
最近、Nuxtを利用してサイトを作りましたが、諸事情によりドメインのルート配下ではなく、特定パス配下で公開する必要がありました。ルーティングに加えて、今回導入していたPWAにおいても設定が必要でしたので、そのメモです。
想定するサイト公開URL
https://yourdomain.com/yourpath
サイト開発環境
- Nuxt
- @nuxtjs/pwa
- (@nuxtjs/onesignal)
設定内容
/*
** Module configuration
*/
modules: [
'@nuxtjs/onesignal', // OneSignalを使う場合は追加
'@nuxtjs/pwa'
],
/*
** OneSignalを使う場合は追加
** Web Push(OneSignal) configuration
*/
oneSignal: {
// ...省略
path = '/yourpath';
importScripts = ['/yourpath/sw.js']; // onesignal用のスクリプトの中でswが読み込まれるようになる
},
/*
** workbox configuration
*/
workbox: {
// ...省略
swURL: '/yourpath/sw.js', // これを設定しないとswのregistrationでうまくいかない
swScope: '/yourpath' // スコープは通常公開パスに設定されるが、一応明示的に指定
},
/*
** route configuration
*/
router: {
base: "/yourpath/", // ここを設定しないとサイトが表示されない
},
/*
** PWA configuration
*/
manifest: {
// ...省略
start_url: "/yourpath/" // ←最後の'/'が非常に重要。忘れると※1のようなエラーが発生
},
※1:
User will not be prompted to Install the Web App
Service worker does not successfully serve the manifest's start_url
おわりに
Nuxt良いですね。サイトをささっと作ってしまいたいときに、面倒な作業は既に設定済みで開発に集中できる感があります。