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.プリプロセッサ

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

<style lang="sass">
.red
 color: red
</style>

この問題の解決策は非常に簡単で、これらの依存関係をインストールするだけです。

npm install --save-dev node-sass sass-loader

しかし、中国語のドキュメントを読んだとき、バージョン番号を無視して上記のプロンプトに従っても、さまざまなデバッグの後、最終的に解決策を見つけることができませんでした。後で、中国語のドキュメントのバージョン番号が低すぎることがわかりました。ドキュメントを表示する必要がある場合は、必ず英語のドキュメントの最新バージョンを読んでください。

3. px2remの使い方

背景: cssでpxを書き、px2remローダーを通してpxをremに変換します

以前のプロジェクトではpx2remローダーを通して実装していましたが、Nuxt.jsではプロジェクトの下で、 css ローダーの追加には vue-loader が関与するため、依然として非常に手間がかかります。

postcssを使用して処理できる別の解決策を考えました。構成は、nuxt.config.js ファイルまたは postcss.conf.js ファイルに追加できます。

build: {
 postcss: [
  require('postcss-px2rem')({
   remUnit: 75 // 转换基本单位
  })
 ]
},

4. Webpack 構成を拡張する方法

背景: utils ディレクトリにエイリアスを追加します

先ほど述べたように、Nuxt.js には Webpack 構成が組み込まれており、構成を拡張することができます。それは nuxt.config.js ファイル内にあります。同時に、このファイル内の構成情報を印刷することもできます。

extend (config, ctx) {
 console.log('webpack config:', config)
 if (ctx.isClient) {
  // 添加 alias 配置
  Object.assign(config.resolve.alias, {
   'utils': path.resolve(__dirname, 'utils')
  })
 }
}

5. vue プラグインの追加方法

背景: vue のインスタンス化プロセスが公開されていないため、いつ注入すればよいかわかりません。

Nuxt.config.js にプラグイン構成を追加して、Nuxt.js アプリケーションが初期化される前にプラグインがロードおよびインポートされるようにすることができます。

module.exports = {
 plugins: ['~plugins/toast']
}

~plugins/toast.js ファイル:

import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)

6. 環境変数 NODE_ENV を変更する方法

背景: プロジェクトで、異なるバージョンに対応する 3 つの NODE_ENV 値を設定します。開発、ローカル開発、プレリリース版、オンライン版。このうち、プレリリース版には製品版よりも多くの vconsole が含まれています。

// package.json
"scripts": {
 "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
 "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
 },

Print process.env.NODE_ENV はまだ運用中です。

バックパックのソースコードで答えを見つけました。バックパックのビルドコマンドを実行すると、process.env.NODE_ENVが本番環境に変更されますが、これはハードコーディングされており、構成できません...

絶望的に、私はただ単にNODE_ENVを表す__ENV属性をprocess.envの下に追加できます

この時点では、ページprocess.env.__ENVに出力される情報は未定義ですが、process.env.NODE_ENVは出力できます。

この問題は、nuxt.config.js で env 属性を構成することで解決できます。

env: {
 __ENV: process.env.__ENV
}

開発上の問題

1. Window または Document オブジェクトが未定義ですか?

背景: サードパーティのプラグインを導入する場合、またはコードにウィンドウを直接記述する場合、コンソールはウィンドウが未定義であるという警告を出します。
この問題の理由は、ノードサーバーにウィンドウまたはドキュメントオブジェクトがないことです。解決策は、process.browser を使用して環境を区別することです。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

AnglarJsを使用してプルアップ読み込みを実装する

vue.jsを使用して選択した変更メソッドを実装する方法

vueでクリックイベントがバブリングするのを防ぐ方法

Vue .js クリック ボタンでコンテンツを表示/非表示にする

vue で現在の項目の表示と非表示を変更する方法

Ionic は検証コードのカウントダウンを実装します

で親コンポーネントのクリックを実装して子コンポーネント イベントをトリガーする方法ビュー

以上がNuxt.js に関するいくつかの一般的な問題 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。