Open4
逆引き: Nuxt.js v2
ピン留めされたアイテム
ヒカルNuxt.js のセットアップ
> npx create-nuxt-app blog
Nuxt.js のソースをサブディレクトリに設定する方法
nuxt.config.js
export default {
// ソースディレクトリ
srcDir: 'client/',
}
-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/
tsconfig.json があれば compilerOptions.paths を以下のように変更する。
tsconfig.json
{
"compilerOptions": {
"paths": {
"~/*": [
"./client/*"
],
"@/*": [
"./client/*"
]
},
},
}
参考
ヒカルNuxt.js でサブディレクトリにデプロイするときに必要な対応
例として/app1/サブディレクトリにデプロイする場合は、nuxt.config.jsに以下の項目を追加する。
nuxt.config.js
export default {
// ルーターの設定
router: {
base: '/app1/',
},
// 各ページヘッダーの設定
head: {
base: {
href: 'router.base',
},
},
}
あとは、ビルドしたファイルを指定したサブディレクトリにアップロードすれば完了です。
ヒカルNuxt.js で ルーターを使った URL 変更イベント
構成: Nuxt.js v2 + TypeScript + nuxt-property-decorator
this.$router.afterEach((toRoute, fromRoute) => {
// e.g. top から about ページに画面遷移した場合
console.log(`to = ${toRoute.fullPath}"`); // to = /about
console.log(`from = ${fromRoute.fullPath}`); // from = /top
});