单页面应用在前端正大放光彩。的新手来说，并不是那么友好，虽然已有官方SSR中文文档。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。的时候，会按照路由的层级进行动态渲染出对应的html文件。插件也是再合适不过了。问题，那么使用此插件配合-spa-也是再合适不过了是异步加载的，那么你可能需要这样使用因为这个内容页是根据用户信息变化的，所以页面内容也不是唯一确定的.
Vue 单页应用的另一种处理 SEO 的方法
vue-meta-info 官方地址：/vue-meta-info
(设置vue单页元信息信息，如果需要单页SEO，可以和-spa-形成更好的合作)
单页应用正在前端兴起。 Vue和Vue这三大框架是妇女和儿童所熟知的。随着单页应用的普及，人们感受到了完美的用户体验和强大的开发效率，同时也似乎不可避免地要应对SEO的需求。
本文主要介绍vue2.0单页Meta SEO优化：
其实解决SEO问题不一定非得靠服务端渲染来处理。服务端渲染对于刚接触vue的新手来说不是那么友好，虽然有官方的SSR中文文档。然而，对于一个已经开发用于在工作量和技术方面获取 SSR 的 Vue 项目来说，这是一个挑战。但是优秀的前端程序员哪有那么难！
如果您调查服务器端渲染 (SSR) 只是为了改善一些营销页面（例如 /、/、/ 等）的 SEO，那么您可能需要预渲染。与其使用 Web 服务器动态编译 HTML，不如使用预渲染在构建时（时间）简单地为特定路由生成静态 HTML 文件。优点是更容易设置预渲染并将您的前端作为一个完全静态的站点。
如果您使用 ，您可以使用 -spa- 轻松添加预渲染。它已经过 Vue 应用程序的广泛测试。
预渲染为 SEO 提供了另一种可能性。简而言之，预渲染是指vue-cli搭建的项目在运行npm run时，会根据路由级别动态渲染对应的html文件。
// webpack.conf.jsvar path = require('path')var PrerenderSpaPlugin = require('prerender-spa-plugin')module.exports = { // ... plugins: [ new PrerenderSpaPlugin( // 编译后的html需要存放的路径 path.join(__dirname, '../dist'), // 列出哪些路由需要预渲染 [ '/', '/about', '/contact' ] ) ]}最终会生成类似这样的目录结构
并且里面的内容会被渲染成静态的html文件
与以前的比较可能只有
tangeche-pc 你可以直观的找到预渲染的作用。
通过预渲染，我们可以解决很多SEO问题，但是有时候我们也需要Meta信息的变化，比如Meta或者link…
安利这里是vue-meta-info，一个可以动态设置元信息的vue插件。如果需要单页SEO，可以和-spa-形成更好的合作。
vue-meta-info 是一个基于 vue 2.0 的插件，它可以让你更好地管理应用中的元信息。您可以直接在组件中设置它，它可以自动挂载在您的页面上。如果你需要在数据变化时自动更新你的、meta 等信息，那么这个插件也是合适的。当然，有时候我们也可能会遇到 SEO 的问题，所以使用这个插件配合 -spa- 也是完美的
1.安装
1-1.纱：
yarn add vue-meta-info1-2.npm:
2.全局导入 vue-meta-info
import Vue from 'vue'import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)3.在组件中静态使用
...4.如果你的 or 元是异步加载的，那么你可能需要这样使用它
... 写到这里，大家应该明白我说的另一种SEO思路是什么意思了，+
您可以在一定程度上解决 SEO 问题。这种方法的优点是代码侵入性较小，开发成本最低。但也有缺点：
没有很好地处理用户唯一路由：例如，如果一个路由是/my-，预渲染可能不能很好地工作，因为内容页面根据用户信息而变化，所以页面内容不是唯一确定的。您可能会使用类似 //:/ 的路由路径，但这不合适。
频繁更改的文件
需要预渲染数千个路由文件：这可能会花费您的编译时间……好吧，您可能要编译很长时间
免责声明：本文来自网络用户投稿，不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除，本站不负任何责任及承诺。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
微信 
支付宝 