Vue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。-フロントエンドQ&A-php.cn

Vue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。

PHPz

リリース： 2023-04-17 11:18:27

オリジナル

1192 人が閲覧しました

Vue フレームワークは、非常に人気のある JavaScript フロントエンドフレームワークであり、よりスムーズで効率的な MVVM パターンの理解に重点を置いた Evan You によって開発されたフレームワークです。この登場により、フロントエンド開発者は優れたユーザーエクスペリエンスを備えた Web アプリケーションをより簡単に開発できるようになります。この記事では、読者がフレームワークの使用スキルをよりよく習得できるように、Vue フレームワークのサーバーおよびクライアントのデプロイ方法を紹介します。

1. クライアントデプロイメント

Vue フレームワークのクライアントデプロイメントは比較的簡単です。フレームワークファイルを HTML ファイルに導入するだけです。一般的に使用される導入方法は 2 つあります:

1. CDN を使用してインポートする:

Vue の公式 CDN アドレスを直接使用して、Vue.js ファイルを HTML ファイルにインポートできます (例:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

ログイン後にコピー

2)。インポートするソースファイル:

Vue のソースコードを直接ダウンロードして、対応するファイルを HTML ファイルに導入することもできます。たとえば、次のようになります。

<script src="./path/to/vue.js"></script>

ログイン後にコピー

導入後、次のことができます。 Vue フレームワークを直接使用します。

2. サーバー側のデプロイメント

Vue フレームワークをサーバー側にデプロイする前に、まず関連する Node.js 環境をインストールする必要があります。 Node.js 環境の準備ができたら、Vue サーバー側レンダリングの開発を開始できます。

1. プロジェクトの作成と構成

プロジェクトを作成した後、package.json ファイルに関連する依存関係を導入する必要があります。その中で、Vue は Vue サーバーに関連しています。

{
  "dependencies": {
    "vue": "^2.5.0",
    "vue-server-renderer": "^2.5.0"
  }
}

ログイン後にコピー

2. サーバー側のコードの作成

次に、Node の express フレームワークを使用して、サーバー側のコードを作成する必要があります。 .js を使用してプロジェクトをビルドし、Vue サーバーレンダリングミドルウェアをプロジェクトに追加します。例:

const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    template: '<div>Hello {{ name }}</div>',
    data: {
      name: 'Vue SSR'
    }
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server started at localhost:${port}`)
})

ログイン後にコピー

上記のコードは、Vue SSR の基本機能を実装するだけです。サーバーの起動後、ページにアクセスすると、Vue コンポーネントによってレンダリングされたページコンテンツが返されます。

コード vue-server-renderer で createRenderer() メソッドを使用すると、レンダラオブジェクトが作成され、そのオブジェクトがテンプレートとして使用されることがわかります。パラメータは次のとおりです。 renderToString() メソッドに渡されます。このメソッドは、Vue コンポーネントを HTML 文字列にレンダリングし、結果をフロントエンドページに返します。

3. Webpack の設定

プロジェクトで Webpack を使用する場合は、Webpack 設定ファイルで Vue ファイルのコンパイルルールを設定する必要があります (例:

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

ログイン後にコピー

##)。 # 上記のコードで使用されている

vue-loader は、.vue ファイルを処理するために Webpack に来て、主に .vue タイプのファイルを実行可能な JS コードに変換します。

4. サーバー側レンダリングのルーティング設定

Vue SSR を使用する場合、ルーティングリクエストの内容を正しくレンダリングするために、プロジェクト内でルーティング設定を実行する必要があります。例:

const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    template: `<div>Hello {{ name }}！</div>`,
    data: {
      name: 'Vue SSR'
    }
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      return res.status(500).end('Internal Server Error')
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>Hello</title>
        </head>
        <body>${html}</body>
      </html>
    `)
  })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server started at localhost:${port}`)
})

ログイン後にコピー

上記のコードは、

express フレームワークを使用してルーティングを構成し、ルーティングリクエストを判断した後にページ全体をレンダリングし、ブラウザに返します。

概要

この記事では、Vue サーバーとクライアントの基本的なデプロイ方法を簡単に紹介します。プロジェクトを開発する際には、適切なデプロイ方法を選択する必要があります。静的ページを表示するだけでよいプロジェクトの場合は、クライアント展開方法を使用します。データの動的な表示や SEO の改善が必要なプロジェクトの場合は、サーバー側のレンダリングデプロイメントを使用することをお勧めします。この記事が読者にとって役立ち、Vue フレームワークの使用スキルをよりよく習得できることを願っています。

以上がVue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。