Vue SEO

Vue SEO

SEO ： 搜索引擎优化

基本条件

1. 多页面 ===> 蜘蛛抓取
1. 页面还有蜘蛛的内容
1. title，描述，关键词

解决方案

​ 01 - 预渲染

优点： 适合项目某几个做 seo

缺点 ：

1. 如果有很多详情页需要seo，预渲染不合适
2. 动态去改变 title ， 描述 ， 关键字 也是无效的

// vue.config.js
vue 插件 ： prerender-spa-plugin
const path = require(' path ')
const PrerenderSPAPlugin = require(' prerender-spa-plugin ')

module.exports = {
    pubilcPath: './',
    configureWebpack : {
        plugins :[
            new PrerenderSPAPlugin({
                staticDir : path.join(_dirname,'dsit')
            	routes:[
                '/',
                '/home'
                ] // 路由配置有几个这里就写几个
            })
        ]
    }
}；

解决 title,描述，关键词： vue-meta-info
1. main.js
	import MetaInfo from 'vue-meta-info'
	Vue.use(MetaInfo)
2.
	export default{
        metaInfo:{
            title:'这里是登录页',
            meta:[{
                name:'关键字',
                content:'描述'
            }]
        }   
    }

​ 02 - 服务器渲染

​ 使用 NUXTJS

什么是 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以帮助开发者快速搭建单页应用（SPA）或服务端渲染应用（SSR）。

Nuxt.js 借鉴了 Next.js 的理念，提供了一种简单且强大的方式来创建和管理 Vue.js 应用。它内置了很多有用的功能和约定，包括代码分割、静态网站生成、预渲染、自动路由生成等，使得开发者能够更轻松地构建高性能、可扩展的应用程序。

以下是 Nuxt.js 的一些主要特性：

1. 服务端渲染（SSR）：Nuxt.js 可以为您的应用程序实现服务端渲染，以加快首次加载速度，并有利于搜索引擎优化（SEO）。
2. 自动化的路由和代码分割：Nuxt.js 根据文件目录结构自动生成路由配置，同时还支持异步加载和代码分割，以优化页面加载性能。
3. 静态网站生成：通过使用 nuxt generate 命令，Nuxt.js 可以为您的应用程序生成一个静态网站，方便部署到各种托管平台上。
4. 强大的插件机制：Nuxt.js 提供了丰富的插件机制，可以轻松集成第三方库或模块，扩展应用的功能。
5. 支持多种数据源：Nuxt.js 提供了从各种数据源（如 API、数据库等）获取数据的简便方式，并可以在服务端渲染和客户端渲染之间共享数据。

总的来说，Nuxt.js 是一个功能强大且易于使用的 Vue.js 应用框架，它能够帮助开发者更高效地构建现代化的 Web 应用程序。

// Nuxt.js 项目上线流程
	1. npm run build
    2.将打包完成的文件单独拷贝出来
    	nuxt.config
		.nuxt
		package.json
		static
    3.将4个文件拷贝到服务器上 ， 服务器安装 node 环境
    	npm install
    4. 运行 npm run start
    5. nginx设置代理