40 lines
1.2 KiB
Markdown
40 lines
1.2 KiB
Markdown
|
# Prerendering for SEO
|
||
|
|
|
||
|
|
If you want to prerender routes that will not significantly change once pushed to production, use this Webpack plugin: [prerender-spa-plugin](https://www.npmjs.com/package/prerender-spa-plugin), which has been tested for use with Vue. For pages that _do_ frequently change, [Prerender.io](https://prerender.io/) and [Netlify](https://www.netlify.com/pricing) both offer plans for regularly re-prerendering your content for search engines.
|
||
|
|
|
||
|
|
## Using `prerender-spa-plugin`
|
||
|
|
|
||
|
|
1. Install it as a dev dependency:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install --save-dev prerender-spa-plugin
|
||
|
|
```
|
||
|
|
|
||
|
|
2. Require it in **build/webpack.prod.conf.js**:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// This line should go at the top of the file where other 'imports' live in
|
||
|
|
const PrerenderSpaPlugin = require('prerender-spa-plugin')
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Configure it in the `plugins` array (also in **build/webpack.prod.conf.js**):
|
||
|
|
|
||
|
|
```js
|
||
|
|
new PrerenderSpaPlugin(
|
||
|
|
// Path to compiled app
|
||
|
|
path.join(__dirname, '../dist'),
|
||
|
|
// List of endpoints you wish to prerender
|
||
|
|
[ '/' ]
|
||
|
|
)
|
||
|
|
```
|
||
|
|
|
||
|
|
If you also wanted to prerender `/about` and `/contact`, then that array would be `[ '/', '/about', '/contact' ]`.
|
||
|
|
|
||
|
|
4. Enable history mode for `vue-router`:
|
||
|
|
```js
|
||
|
|
const router = new VueRouter({
|
||
|
|
mode: 'history',
|
||
|
|
routes: [...]
|
||
|
|
})
|
||
|
|
```
|