Nuxt.js に関するいくつかの一般的な問題 (詳細なチュートリアル)

この記事では主に Nuxt.js の落とし穴の概要と共有を紹介し、参考にしていきます。

ビルドの問題

1. head に js ファイルを導入する方法

背景: 内に、flexible.js ファイルをインラインで導入します。このプロジェクトは主にモバイル端末のプロジェクトであり、モバイル端末への適応課題を実現するためにflexible.jsが導入されています。
Nuxt.js は vue-meta を介してヘッダータグ管理を実装しています。ドキュメントを見ると、次のように設定できることがわかりました:

// nuxt.config.js
head: {
 script: [
  { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
 ]
}

その結果、HTML が生成されます:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>

vue-meta がエスケープされていることがわかりました。引用符を追加し、__dangerouslyDisableSanitizers: ['script'] の後に追加すると、これらの文字はエスケープされなくなります。このフィールドは注意して使用してください。

次に、console.log("hello")の内容をflexible.jsに置き換えます:

head: {
 script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
 __dangerouslyDisableSanitizers: ['script']
}

ピットに成功しました、次のピット…

2.プリプロセッサ

背景: コンポーネント内の