https://github.com/czl0325/vue-prerender-demo
vue 预渲染教程，如何优化SEO
https://github.com/czl0325/vue-prerender-demo
Last synced: 6 months ago
JSON representation
vue 预渲染教程，如何优化SEO
- Host: GitHub
- URL: https://github.com/czl0325/vue-prerender-demo
- Owner: czl0325
- License: apache-2.0
- Created: 2019-04-09T06:41:20.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T18:51:56.000Z (over 2 years ago)
- Last Synced: 2023-03-02T19:52:10.342Z (about 2 years ago)
- Language: JavaScript
- Size: 1.2 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-prerender-demo
vue是一个单页面的应用，这导致一些爬虫和百度无法搜索到。如果你想针对你应用的其中某些页面进行SEO优化，让他们可以被爬虫和百度搜索到，你可以进行预渲染操作，无需使用web服务器实时动态编译html，只需要在构建的时候简单的生成针对特定路由的静态html文件。优点是设置预渲染更简单，并可以将你得前端作为一个完全静态的站点。
### 1.先创建一个简单的vue网站，
首页home -> 关于页面about -> 我的页面my
运行后可以看到，首页的网络请求只有一个
，没有相应的文字和组件，这对seo非常不友好。
### 2. 然后我们要对某些页面进行SEO的优化。
(1)首先要把router的mode改成history，
(2)安装预渲染的插件：npm install prerender-spa-plugin -D
(3)跟着官网的操作，在生产环境下webpack.prod.conf.js内部引入渲染器
```Javascript
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer =PrerenderSPAPlugin.PuppeteerRenderer
```
(4)在plugins中new插件进行一些相关的配置
```Javascript
new PrerenderSPAPlugin({
//你存放的静态资源目录
staticDir:path.join(__dirname,'../dist'),
//你需要对哪几个路由进行SEO，数组形式，可以多个路由
routes: ['/','/about'],
//预编译的重要配置
renderer:new Renderer({
inject: {
foo:'far'
},
headless:false,
//非常重要，文档事件渲染后调用的事件名，在项目的入口中使用
renderAfterDocumentEvent:'render-event'
})
})
````
(5)在main.js中配置mounted
```Javascript
mounted() {
document.dispatchEvent(new Event('render-event'))
}
```
Event内的名字就是你在前面声明的名字。
(6)重新执行打包 npm run build
会发现dist目录已经不一样了。多了个about文件夹
运行项目后可以看到
已经有了相关的组件显示出来了，这就对SEO优化的预渲染