Nuxt.js はページレンダリングの実行時オプションをカスタマイズできます。
Object
このオプションを使用して Vue SSR のバンドルレンダラのカスタマイズします。このオプションは SPA モードではスキップされます。
export default {
render: {
bundleRenderer: {
directives: {
custom1: function (el, dir) {
// 何かの処理 ...
}
}
}
}
}
利用可能なオプションは Vue SSR API リファレンス でより詳しく学べます。 Nuxt.js は既に最高の SSR のデフォルト設定を提供していて、誤った設定が SSR の問題を引き起こす可能性があるため、このオプションを使用しないことをお勧めします。
Object
{ weak: true }
ページの etag を無効にするためには etag: false
をセットしてください。
利用可能なオプションは etag を参照してください。
Object
{ threshold: 0 }
Object を設定する場合、compression がミドルウェアとして利用され、そのオプションとして参照されます。
独自の圧縮ミドルウェアを使用したい場合は、直接参照することができます。(f.ex. otherComp({ myOptions: 'example' })
)
圧縮を無効にするには、compressor: false
を使います。
Object
{ dist: {}, static: { skipUnknown: true } }
serve-placeholder ミドルウェアのオプションです。
もしこれらのうち1つか両方を無効にする場合は、偽となる値を渡すことができます。
Object
{ push: false, pushAssets: null }
HTTP2 プッシュヘッダーを有効にします。
pushAssets
関数でプッシュされるリンクをコントロールすることができます。
例:
pushAssets: (req, res, publicPath, preloadFiles) => preloadFiles
.filter(f => f.asType === 'script' && f.file === 'runtime.js')
.map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
配列と同様に自分のアセットを追加することができます。
req
と res
を使うことで、例えばアプリケーションバージョンを持ったクッキーを使うといったように、リクエストヘッダを元にどのリンクをプッシュするか決めることができます。
それらのアセットは ,
を区切り文字として合成され、1つの Link
ヘッダに渡されます。
Boolean
true
Nuxtのバンドルに
<script>
を追加します。JSを除く純粋なHTMLを表示する場合はfalse
に設定してください。(v2.8.0+
から利用可能)
Boolean
true
初期ページの読み込み時間をより早くするために、
prefetch
とpreload
のリンクを追加しました。
多くのページとルートがある場合に、このオプションのみを無効にすることができます。
Boolean
true
SPA モードでは false
SSR レンダリングを有効にする
このオプションは、提供されていなければ mode
に基づいて自動的に設定されます。
これは(例えば Docker で)イメージビルド後にランタイムで SSR を動的に有効/無効にするのに便利です。
Boolean
| String
true
in dev mode and false
in productionデバックしやすいように、サーバーサイドのログをブラウザに転送します(開発モードのみ利用可能)
ログを折り畳むには、'collapsed'
を設定します。
Object
{}
static/
ディレクトリの振る舞いを設定します
利用可能なオプションは serve-static を参照してください。
それらに加えて、デフォルトで true
になる prefix
オプションを導入しました。
静的なアセットに router base を追加します。
例:
favicon.ico
/t
prefix: true
(デフォルト): /t/favicon.ico
prefix: false
: /favicon.ico
Caveats:
一部 URL の書き換えでは、プレフィックスが守られないかもしれません。
Object
{ maxAge: '1y', index: false }
配布ファイルの配信に使用されるオプションです。本番でのみ適用されます。
利用可能なオプションは serve-static を参照してください。
Boolean
または Object
false
これは Content-Security-Policy で適用された外部リソースを読み込む設定をするために使用します。
例 (nuxt.config.js
)
export default {
render: {
csp: true
}
}
// または
export default {
render: {
csp: {
hashAlgorithm: 'sha256',
policies: {
'script-src': [
'https://www.google-analytics.com',
'https://name.example.com'
],
'report-uri': [
'https://report.example.com/report-csp-violations'
]
}
}
}
}
// または
/*
次の例では、Google Analytics、LogRocket.io、および Sentry.io で
ロギング、トラッキングの分析を行えます。
Sentry.io のブログで確認する
https://blog.sentry.io/2018/09/04/how-sentry-captures-csp-violations
どのトラッキングリンクを使うべきかを学ぶこと。
*/
const PRIMARY_HOSTS = `loc.example-website.com`
export default {
csp: {
reportOnly: true,
hashAlgorithm: 'sha256',
policies: {
'default-src': ["'self'"],
'img-src': ['https:', '*.google-analytics.com'],
'worker-src': ["'self'", `blob:`, PRIMARY_HOSTS, '*.logrocket.io'],
'style-src': ["'self'", "'unsafe-inline'", PRIMARY_HOSTS],
'script-src': ["'self'", "'unsafe-inline'", PRIMARY_HOSTS, 'sentry.io', '*.sentry-cdn.com', '*.google-analytics.com', '*.logrocket.io'],
'connect-src': [PRIMARY_HOSTS, 'sentry.io', '*.google-analytics.com'],
'form-action': ["'self'"],
'frame-ancestors': ["'none'"],
'object-src': ["'none'"],
'base-uri': [PRIMARY_HOSTS],
'report-uri': [
`https://sentry.io/api/<project>/security/?sentry_key=<key>`
]
}
}
}
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する