ホームページ > 記事 > ウェブフロントエンド > Vue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。
Vue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。
- PHPzオリジナル
- 2023-04-17 10:30:021144ブラウズ
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 コードに変換します。
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 フレームワークでのサーバーとクライアントのデプロイ方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。