vuejs seo优化(vue setinterval)

佛语：“赠人玫瑰，手留余香。” 若您感觉博文内容与您有益，请点赞并收藏！

敬请关注作者，海量博文持续更新中。望与各位码友同学习，共进步！

VuePress ,一个全新的基于 vue 的 静态网站生成器 ，实际上就是一个 vue 的 spa 应用，内置 webpack ，可以用来写文档。

VuePress 由两部分组成：一个以 Vue 驱动的主题系统简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML ，它能提供出色的加载性能，并且对 SEO 友好。页面加载之后， Vue 就会将这些静态内容接管为完整的单页面应用程序( SPA )。当用户在浏览站点时，可以按需加载其他页面。

VuePress 网站实际上是由 Vue , Vue Router 和 webpack 驱动的单页面应用程序。如果你以前使用过 Vue ，那么在编写或开发自定义主题时（甚至可以使用 Vue DevTools 来调试你的自定义主题！），你会快速融入到熟悉的开发体验中！

在构建过程中，我们会创建应用程序的服务器渲染版本，并且实际上是通过访问每个路由，来渲染相应的 HTML 。这种方式受到 Nuxt 的 nuxt generate 命令以及 Gatsby 等其他项目的启发。

首先说明一下官方推荐的目录结构：

可以右键手动新建，也可以使用 mkdir 命令新建：

全局安装 VuePress

进入 vuepressBlogDemo 文件夹，初始化项目

使用 npm init 或 npm init -y （默认yes）

在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

vuepressBlogDemo

├─── docs

│ ├── README.md

│ └── .vuepress

│ ├── public

│ └── config.js

└── package.json

在 config.js 文件中配置网站标题、描述、主题等信息

其中， /tang/ 、 /song/ 、’'和 libai/ 等表示当前导航栏或侧边栏点击所跳转的路由地址（即相应的 .md 文件），按照路由创建对应的文件。

'' 会显示为当前目录下的 README.md 文件。

[’’, ‘简介’] 当前侧边栏的 title 为简介。

/tang/ 表示为tang文件夹下的 README.md ， /tang 表示为 tang.md文 件。

可以使用 sidebar: auto 自动生成侧边栏，采用自定义侧边栏。

在 package.json 文件里添加两个启动命令

在 config.js 中添加 locales 字段，配置国际化。

配置默认主题的导航栏和侧边栏支持国际化，在上述 themeConfig 中增加 locales 字段：

nav 和 sidebar 和前文字段含义相同。

相应的也要增加国际化相应的文件夹及文件，整体结构跟原结构一致，如图：

一切就绪，启动项目

项目开发完毕后，便可像部署其他前端 Vue 项目一样进行项目部署上线，依赖系统只需要通过链接形式，访问该系统上的相关支持文档。从而实现小助手功能。

完成了基础搭建后，就可以在 docs 目录下新建 .md 文件写文章了（ .md 是 Markdown 语法文件，需要掌握 Markdown 的一些基本写法。）

而且， vuepress 支持自定义布局以及自定义主题，并且可以使用很多插件以及自定义插件。

本文链接：https://www.24zzc.com/news/169751803947713.html