Maison > Article > interface Web > Parlez des méthodes de déploiement de serveur et de client dans le framework Vue

Parlez des méthodes de déploiement de serveur et de client dans le framework Vue

PHPzoriginal: 2023-04-17 10:30:021087parcourir

Le framework Vue est un framework frontal JavaScript extrêmement populaire. Il s'agit d'un framework développé par Evan You qui se concentre sur la compréhension du modèle MVVM plus fluide et plus efficace. Son émergence permet aux développeurs front-end de développer plus facilement des applications web avec une bonne expérience utilisateur. Cet article présentera les méthodes de déploiement serveur et client du framework Vue pour aider les lecteurs à mieux maîtriser les compétences d'utilisation du framework.

1. Déploiement client

Le déploiement client du framework Vue est relativement simple. Il vous suffit d'introduire le fichier framework dans le fichier HTML. Il existe deux méthodes d'introduction couramment utilisées :

Vous pouvez directement utiliser l'adresse CDN officielle de Vue pour introduire le fichier Vue.js dans le fichier HTML, par exemple :

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

2. Téléchargez le fichier source à importer :

Vous pouvez également télécharger directement le code source de Vue, et puis introduisez le fichier correspondant dans le fichier HTML, par exemple : Après l'introduction de

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

, vous pouvez utiliser directement le framework Vue.

2. Déploiement côté serveur

Avant de déployer le framework Vue côté serveur, vous devez d'abord installer l'environnement Node.js approprié. Une fois l'environnement Node.js prêt, vous pouvez commencer à développer le rendu côté serveur Vue.

1. Création et configuration du projet

Après avoir créé le projet, vous devez introduire les dépendances pertinentes dans le fichier package.json Les dépendances liées au rendu du serveur Vue et Vue sont les suivantes :

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

. package.json 文件中引入相关的依赖，其中Vue与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}`)
})

2.服务器端代码编写

接下来需要编写服务器端代码，在Node.js中使用 express 框架进行项目搭建，然后在项目中加入Vue服务器渲染中间件。例如：

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

以上代码简单地实现了Vue SSR的基本功能，服务器启动后，访问页面时将返回Vue组件渲染后的页面内容。

可以看到，在代码中使用 vue-server-renderer 中的 createRenderer() 方法，创建了一个renderer对象，并将该对象作为模板参数传递给了 renderToString() 方法，负责将Vue组件渲染成HTML字符串，并将结果返回给前端页面。

3.配置Webpack

在项目中使用了Webpack，需要在Webpack配置文件中设置Vue文件的编译规则，例如：

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}`)
})

以上代码中使用了 vue-loader来Webpack处理 .vue 文件，主要是将 .vue 类型文件转换为可运行的 js 代码。

4.服务端渲染路由配置

在使用Vue SSR时，需要在项目中进行路由配置，以便正确地渲染路由请求的内容。例如：

rrreee

以上代码使用了 express2 .Écriture de code côté serveur

Ensuite, vous devez écrire du code côté serveur, utiliser le framework express dans Node.js pour construire le projet, puis ajouter le middleware de rendu du serveur Vue au projet. Par exemple :

rrreee

Le code ci-dessus implémente simplement les fonctions de base de Vue SSR. Après le démarrage du serveur, le contenu de la page rendu par le composant Vue sera renvoyé lors de l'accès à la page.

🎜Vous pouvez voir que la méthode createRenderer() dans vue-server-renderer est utilisée dans le code pour créer un objet de rendu et transmettre l'objet comme paramètre de modèle. La méthode renderToString() est donnée, qui est responsable du rendu du composant Vue dans une chaîne HTML et du renvoi du résultat à la page frontale. 🎜🎜3. Configurez Webpack🎜🎜Si vous utilisez Webpack dans le projet, vous devez définir les règles de compilation du fichier Vue dans le fichier de configuration Webpack, par exemple : 🎜rrreee🎜Le code ci-dessus utilise vue-loader vers Webpack Processing Les fichiers <code>.vue convertissent principalement les fichiers de type .vue en code js exécutable. 🎜🎜4. Configuration du routage de rendu côté serveur🎜🎜Lors de l'utilisation de Vue SSR, la configuration du routage doit être effectuée dans le projet afin de restituer correctement le contenu de la demande de routage. Par exemple : 🎜rrreee🎜Le code ci-dessus utilise le framework express pour configurer le routage, restitue la page entière après avoir jugé la demande de routage et la renvoie au navigateur. 🎜🎜Résumé🎜🎜Cet article présente brièvement les méthodes de déploiement de base du serveur et du client Vue Vous devez choisir la méthode de déploiement appropriée lors du développement de projets. Pour les projets qui doivent uniquement afficher des pages statiques, utilisez la méthode de déploiement client. Pour les projets nécessitant un affichage dynamique des données ou des améliorations du référencement, il est recommandé d'utiliser le déploiement de rendu côté serveur. J'espère que cet article pourra être utile aux lecteurs et vous permettra de mieux maîtriser les compétences d'utilisation du framework Vue. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir les attributs d'une balise dans jquery (une brève analyse de la méthode)Article suivant：Comment définir les attributs d'une balise dans jquery (une brève analyse de la méthode)

Articles Liés

Voir plus