Comment vue.js fait le référencement-Voir.js-php.cn

Comment vue.js réalise le référencement : 1. Utilisez le rendu du serveur SSR ; 2. Lorsque [Nuxt.js] exécute la génération d'un packaging statique, un routage dynamique est d'abord requis pour générer des pages statiques ; -spa-plugin] ; 4. Utilisez Phantomjs pour traiter les robots.

Comment vue.js fait le référencement

[Articles connexes recommandés : vue.js]

Comment vue.js réalise le référencement :

1. Rendu du serveur SSR

À propos du rendu du serveur. : Selon le site officiel de Vue, il existe des exigences pour la version Vue et certaines exigences pour le serveur. Il doit prendre en charge l'environnement nodejs.

Les compromis de l'utilisation de SSR :

Limité par les conditions de développement, le code spécifique au navigateur ne peut être utilisé que dans certaines fonctions de hook du cycle de vie ; bibliothèques externes) peuvent nécessiter un traitement spécial pour s'exécuter dans les applications de rendu du serveur
Les exigences en matière d'environnement et de déploiement sont plus élevées et un environnement d'exécution de serveur Node.js est requis
En cas de trafic élevé, veuillez préparer la charge du serveur correspondante et adopter judicieusement la stratégie de mise en cache.

Avantages :

Meilleur référencement, puisque les robots des moteurs de recherche peuvent visualiser directement la page entièrement rendue
Délai d'accès au contenu plus rapide, en particulier pour les conditions de réseau lentes ou les appareils lents.

Inconvénients : (fosses rencontrées lors du développement)

1. Un ensemble de code et deux ensembles d'environnements d'exécution entraîneront divers problèmes, comme l'absence de fenêtre sur le serveur. Côté, L'objet document est traité en ajoutant un jugement. S'il est exécuté par le client :

if(process.browser){
 console.log(window);
}

Copier après la connexion

fait référence au package npm avec l'opération dom, tel que : wowjs Vous ne pouvez pas utiliser la méthode d'importation. 🎜>

if (process.browser) {
  var { WOW } = require(&#39;wowjs&#39;);
  require(&#39;wowjs/css/libs/animate.css&#39;);
 }

Copier après la connexion

à la place.

2.Méthode Nuxt asyncData, récupère les données avant d'initialiser la page, mais uniquement pour les appels de composants de page :

// 并发加载多个接口：
 async asyncData ({ app, query }) {
 let [resA, resB, resC] = await Promise.all([
  app.$axios.get(&#39;/api/a&#39;),
  app.$axios.get(&#39;/api/b&#39;),
  app.$axios.get(&#39;/api/c&#39;),
  ])
   
  return {
  dataA: resA.data,
  dataB: resB.data,
  dataC: resC.data,
  }
 }

Copier après la connexion

Obtenir les paramètres dans asyncData :

1. paramètres de routage, tels que :

/list/:id' ==> '/list/123Recevoir :

async asyncData ({ app, query }) {
 console.log(app.context.params.id) //123
}

Copier après la connexion

2 Obtenir l'URL ?

Recevoir :

async asyncData ({ app, query }) {
 console.log(query.id) //123
}

Copier après la connexion

3. Si vous utilisez la syntaxe v-if, vous pouvez également rencontrer cette erreur lors du déploiement en ligne : /list?id=123

Erreur lors de l'initialisation de l'application DOMException : échec de l'exécution. 'appendChild' sur 'Node' : ce type de nœud ne prend pas en charge cette méthode.

chez Object.We [as appendChild]

Selon le numéro 1552 sur github nuxt, v-if doit être modifié pour la syntaxe v-show.

4. Il y a trop de pièges, laissez-les de côté et mettez-les à jour plus tard.

2. Statique

Lorsque Nuxt.js exécute la génération d'un packaging statique, le routage dynamique sera ignoré.

-| pages/
---| index.vue
---| users/
-----| _id.vue

Copier après la connexion

Si vous avez d'abord besoin d'un routage dynamique pour générer une page statique, vous devez spécifier la valeur du paramètre de routage dynamique et le configurer dans le tableau routes.

// nuxt.config.js
module.exports = {
 generate: {
 routes: [
  &#39;/users/1&#39;,
  &#39;/users/2&#39;,
  &#39;/users/3&#39;
 ]
 }
}

Copier après la connexion

Exécutez le package et vous verrez la page empaquetée.

Mais que faut-il faire si la valeur du paramètre dynamique de l'itinéraire est dynamique au lieu d'être fixe ?

Utilisez une fonction qui renvoie un type d'objet Promise ;

Utilisez une fonction dont le rappel est callback(err, params).

// nuxt.config.js
import axios from &#39;axios&#39;
 
export default {
 generate: {
 routes: function () {
  return axios.get(&#39;https://my-api/users&#39;)
  .then((res) => {
  return res.data.map((user) => {
   return {
   route: &#39;/users/&#39; + user.id,
   payload: user
   }
  })
  })
 }
 }
}

Copier après la connexion

Nous pouvons désormais accéder à la charge utile depuis /users/_id.vue, comme indiqué ci-dessous :

async asyncData ({ params, error, payload }) {
 if (payload) return { user: payload }
 else return { user: await backend.fetchUser(params.id) }
}

Copier après la connexion

Si votre itinéraire dynamique comporte de nombreux paramètres, tels que les détails du produit, il peut être aussi élevé comme plusieurs milliers. Une interface est nécessaire pour renvoyer tous les identifiants, puis les identifiants sont parcourus lors de l'emballage et emballés localement. Si un produit est modifié ou retiré des rayons, il doit être reconditionné. L'emballage est également très lent et irréaliste lorsque la quantité est importante.

Avantages :

Fichiers statiques purs, la vitesse d'accès est super rapide

Par rapport au SSR, cela n'implique pas ; charge du serveur Question ;
Les pages Web statiques ne conviennent pas aux attaques de pirates et sont plus sécurisées.
Lacunes :
Non applicable s'il existe de nombreux paramètres de routage dynamique.

3. Prerender-spa-plugin

Si vous l'utilisez uniquement pour améliorer le référencement de quelques pages marketing (telles que /, /about, /contact, etc.), vous devrez peut-être effectuer un pré-rendu. Au lieu d'utiliser un serveur Web pour compiler dynamiquement du HTML en temps réel, le pré-rendu génère simplement des fichiers HTML statiques pour des itinéraires spécifiques au moment de la construction. L’avantage est que la mise en place du prérendu est plus simple et vous permet de traiter votre frontend comme un site complètement statique.

$ cnpm install prerender-spa-plugin --save

Copier après la connexion

vue cli 3 vue.config.js configuration :

const PrerenderSPAPlugin = require(&#39;prerender-spa-plugin&#39;);
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require(&#39;path&#39;);
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV !== &#39;production&#39;) return;
  return {
   plugins: [
    new PrerenderSPAPlugin({
     // 生成文件的路径，也可以与webpakc打包的一致。
     // 下面这句话非常重要！！！
     // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
     staticDir: path.join(__dirname,&#39;dist&#39;),
     // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
     routes: [&#39;/&#39;, &#39;/product&#39;,&#39;/about&#39;],
     // 这个很重要，如果没有配置这段，也不会进行预编译
     renderer: new Renderer({
      inject: {
       foo: &#39;bar&#39;
      },
      headless: false,
      // 在 main.js 中 document.dispatchEvent(new Event(&#39;render-event&#39;))，两者的事件名称要对应上。
      renderAfterDocumentEvent: &#39;render-event&#39;
     })
    }),
   ],
  };
 }
}

Copier après la connexion

Ajouter dans main.js :

new Vue({
 router,
 render: h => h(App),
 mounted () {
 document.dispatchEvent(new Event(&#39;render-event&#39;))
 }
}).$mount(&#39;#app&#39;)

Copier après la connexion

Remarque : mode : "history" doit être défini dans le routeur .

Vous pouvez voir le fichier après l'avoir empaqueté et le placer dans le dossier /index.html, par exemple : about => about/index.html, qui contient du contenu html.

Avantages :

Petits changements, il suffit d'introduire un plug-in

Inconvénients :

Le routage dynamique ne peut pas être utilisé

ne convient qu'aux projets comportant un petit nombre de pages. Lorsqu'il y a des centaines de pages, le packaging sera très lent ; 🎜>

4、使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。

虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

具体代码戳这里： vue-seo-phantomjs。

要安装全局 phantomjs ，局部 express ，测试：

$ phantomjs spider.js &#39;https://www.baidu.com&#39;

Copier après la connexion

如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。

启动之后或者用postman在请求头增加 User-Agent 值为 Baiduspider ，效果一样的。

部署上线

线上要安装 node 、 pm2 、 phantomjs ，nginx相关配置：

upstream spider_server {
 server localhost:3000;
}
 
server {
 listen  80;
 server_name example.com;
  
 location / {
  proxy_set_header Host   $host:$proxy_port;
  proxy_set_header X-Real-IP  $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
  if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
  proxy_pass http://spider_server;
  }
 }
}

Copier après la connexion

优势：