好物优选点击查看详情 京东购买

暂无内容

vue SEO的解决方案

vue SEO的解决方案

搜索引擎优化,提高网站的搜索关键词排名以及公司产品的曝光度。

注意: 这里网站内容从哪里来是一个关键点,如果页面的数据是通过请求来的,在页面加载的时候是先有DOM结构,然后才有数据,也就是说此时的网站内容,是无法被蜘蛛抓取的,所以会导致无法被百度收录。

当然为了seo性能好一般会采用前后端不分离,优点在于非常利于seo,因为不用暴露接口,所以安全系数高。缺点即压力全在服务器端导致服务器负载大。

预渲染也称客户端渲染 ,就是在页面加载之前把数据放在页面中,如果是vue文件,我们希望在打包时生成多个页面,这时候我们可以使用 prerender-spa-plugin插件。

适用场景: 比如公司官网,只适合某几个页面需要做seo

一、安装插件

cnpm install --save prerender-spa-plugin 解决打包多个页面 cnpm install --save vue-meta-info 设置title、描述、关键字,解决SEO的问题 

配置 vue.config.js

const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); module.exports = { publicPath: './', configureWebpack: { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: [  '/', '/about', '/contact', ], }), ], }, }; 

在组件中使用 vue-meta-info :

<template> <h2>Home Page</h2> </template> <script> export default { metaInfo: { title: 'aaaaaaa商城', // set a title meta: [{ // set meta name: '关键字,web前端', content: '描述。。。。。。。。。' }] link: [{ // set link rel: 'asstes', href: 'https://assets-cdn.github.com/' }] } } </script> 

注意:这里的 metaInfo 不能使用组件中的data数据(由api接口请求回来的动态数据),必须手写,前端自测时需要把路由模式设置为 hash。

适用场景:整个网站都做 seo

npm run build npm run generate 

注意: 仅用于前端自测试,这个时候不能把打包的文件给后端。

一、运行打包命令

npm run build 

二、移动文件

.nuxt、static、nuxt.config.js、package.json 

把上面的文件给后端,让他放在服务器上 (***)

三、后端安装在服务器安装 Node.js 环境后启动打包的项目

npm run start 

注意: 因为Nuxt.js默认走的端口是: http://localhost:3000/ ,但是我们需要指向到自己的域名,所以后端需要配置默认端口。

原文链接:https://blog.csdn.net/weixin_45731256/article/details/122822144?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836734316800227491277%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836734316800227491277&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-23-122822144-null-null.nonecase&utm_term=%E7%BD%91%E7%AB%99%E3%80%81seo

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享