vue-cli3 预渲染

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上，作者是 Vue 核心团队的成员。

vue-cli3中预渲染

安装插件

npm install prerender-spa-plugin --save-dev

vue-config.js中使用

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {configureWebpack: config => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...return {plugins: [// 预渲染配置new PrerenderSPAPlugin({//要求-给的WebPack-输出应用程序的路径预渲染。staticDir: path.join(__dirname, 'dist'),//必需，要渲染的路由。routes: ['/','/fillIn'],//必须，要使用的实际渲染器，没有则不能预编译renderer: new Renderer({inject: {foo: 'bar'},headless: false, //渲染时显示浏览器窗口。对调试很有用。  //等待渲染，直到检测到指定元素。//例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` renderAfterDocumentEvent: 'render-event'})})],}} else {// 为开发环境修改配置...return;}}

main.js中

new Vue({router,store,render: h => h(App),mounted () {document.dispatchEvent(new Event('render-event'))}
}).$mount('#app')

注意事项：vue-router使用history模式

const router = new VueRouter({mode: 'history',
})

npm run build打包，生成的 dist 目录里有配置的每个路由名称对应的文件夹，里面的index.html有内容，就代表成功了。

vue-cli3 预渲染相关推荐

vue服务器端预渲染prerender-spa-plugin的实践
对一个网站来说,seo是非常重要的一块内容.最近用vue做了一个网站,很自然地找到了Vue SSR 指南.我做的网站只有几个注重营销的页面需要seo,发现在这种场景下用prerender-spa-pl ...
vue使用预渲染prerender-spa-plugin
前言:vue单页面对seo不友好,所以我打算通过预渲染来解决下seo问题. 目前我知道有2种方法, (1)SSR渲染(服务器) (2)prerender-spa-plugin插件预渲染(部分路由)(好 ...
预渲染vue.js应用程序（使用node或laravel）
服务器端渲染现在非常流行.但它也并非没有缺点.预渲染是一种替代方法,在某些情况下甚至可能更好.下面我们来看一下如何预渲染vue.js应用程序. 在本文中,我们将探讨预渲染如何与vue.js一起工作,并 ...
vue预加载动态生成runtime.js_预渲染 prerender-spa-plugin 避坑指南
预渲染原理在webpack打包结束并生成文件后(after-emit hook),会启动一个server模拟网站的运行,用puppeteer(google官方的headless 无头浏览器浏览器)访 ...
vue项目使用预渲染进行seo优化
vue项目使用预渲染进行seo优化 vue进行seo优化的两个方法 1.预渲染*** 针对项目其中几个页面的seo,标题不能通过接口数据动态渲染情况使用使用以下两个插件进行预渲染seo优化: n ...
Vue SPA项目SEO优化之预渲染Prerender-spa-plugin
目的由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容,通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题. 可以看到项目编译后的index.ht ...
vue的SEO优化——预渲染后路由+点击事件失效问题解决
vue是单页面框架且前后端分离,不利于seo优化.针对这一点,还是有解决办法的. 预渲染后路由+点击事件失效问题解决--近期发现最近遇到了一个前台官网,由于时间比较紧,所以我选择了用vue框架去搭建 ...
记录vue预渲染prerender-spa-plugin踏坑
1.安装命令:cnpm install prerender-spa-plugin -D //避免报错,会自动下载文件等待 2.找到build下的webpack.prod.conf.js 头部添加 ...
Vue 服务端渲染预渲染
文章目录简介那么什么是服务端渲染为什么使用服务端渲染服务端渲染 or 预渲染区别如何使用预渲染如何搭建一个预渲染开发环境 Tip 写在最后简介关于 Vue 的 SPA 说的已经太多 ...
Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...

vue-cli3 预渲染

vue-cli3中预渲染

vue-cli3 预渲染相关推荐

最新文章

热门文章