vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）相关的知识，希望对你有一定的参考价值。
参考技术Avue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种：
注意：
然后在webpack.prod.conf.js里面添加：
在webpack.prod.conf.js的plugins里面添加：
最后在main.js里面修改：
安装：
在main.js引入：
在vue页面中配置：
Vue CLI 3 预渲染水疗插件
【中文标题】Vue CLI 3 预渲染水疗插件【英文标题】：Vue CLI 3 prerender-spa-plugin 【发布时间】：2019-06-12 11:53:02 【问题描述】：我尝试使用带有 Vue CLI 3 的 npm 包 prerender-spa-plugin 预渲染我的 SPA 的路由，运行“npm run build”后我得到了一个不错的输出，如下所示：
index.html 中的输出是一个错误：
<html>
<head>
</head>
<body>Html Webpack Plugin:
<pre> ReferenceError: BASE_URL is not defined
- index.html:96
C:/Users/Fred/v2/public/index.html:96:11
- index.html:99 0971.module.exports
C:/Users/Fred/v2/public/index.html:99:3
- index.js:284 Promise.resolve.then
[v2]/[html-webpack-plugin]/index.js:284:18
</pre>
</body>
</html>我的 vue.config.js 是这样的：
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
configureWebpack:
plugins: [
new HtmlWebpackPlugin(
template: './public/index.html',
inject: false
),
new PrerenderSPAPlugin(
staticDir: path.join(__dirname, './dist'),
routes: ['/', '/om-guldbaek', '/om/:id', '/aktiviteter', '/aktivitet/:id', '/foreninger', '/forening/:id', '/begivenheder', '/begivenhed/:id', '/gdpr', '/institutioner', '/institution/:id', '/login', '/nyheder', '/nyhed/:id', '/kontakt', '/registreringer'],
)
],
,
;当我在 VSCode 中运行“npm run build”时，它会不断返回“Building for production...”，而没有任何事情发生。有人知道这个问题吗？
【问题讨论】：
【参考方案1】：好的，我找到了问题。在 index.html 我有一行：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">现在解决了
【讨论】：
以上是关于vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）的主要内容，如果未能解决你的问题，请参考以下文章
vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）
vue-cil 服务端预渲染 prerender-spa-plugin