vue开发网站seo优化方法

Route: [\’/\’, \’/about\’, \’/store_vuex\’, \’/cssAnimate\’, \’/connectMongoDB\’, \’/childParent\’, \’/child1\’, \’/elementUI\’],

//这个非常重要。如果该部分没有设置，则不会被预编译。

renderer: 新渲染器({

注入： {

foo:“酒吧”

},

无头：假的，

//main.js document.dispatchEvent(new Event(‘render-event’)) 需要两个事件名称对应。

renderAfterDocumentEvent:“渲染事件”

})

})

],

};

}

}

接下来，将vue路由模式更改为history。

最后，将此代码添加到main.js 入口文件中。其中，render-event必须对应vue.config.js中的renderAfterDocumentEvent。

新Vue({

路由器，

店铺，

render: h=h(应用程序),

安装（）{

document.dispatchEvent(new Event(\’render-event\’))

}

}).$mount(\’#app\’)

npm run build 现在，打包后的目录结构会是这样的，每个文件夹的index.html代码也会是

当前的HTML 代码在.vue 文件内有模板相关的代码，但还有一个额外的问题。每个文件夹中的Index.html代码引用了所有js和css文件，对于SEO优化没有用处。所以事情还没有结束。

为什么会有这么多js和css文件呢？vue-cli打包时，每个.vue文件的script和style标签都会被打包到对应的js和css文件中，即使标签里什么也没写，因为它变成了。

第二步，将js和css文件压缩合并为更小的大小。

我搜索了vue-cli文档但没有找到任何相关信息，所以我切换到了webpack。

您可以使用此API 设置合并文件的最小大小。将此代码添加到上面Webpack 配置中的插件中，直观估计为10000=1kb。

const webpack=require(\’webpack\’);

新的webpack.optimize.MinChunkSizePlugin({

minChunkSize: 10000 //通过合并小于minChunkSize 大小的块，使块体积保持在指定的大小限制之上

}),

然后npm 运行构建

是同一个目录，但是js和css明显减少了。

方法二、Vue SSR（服务端渲染）

这意味着最初在浏览器中创建的组件首先在服务器上创建，然后生成相应的HTML 并直接发送到浏览器，最后这些静态标签在客户端上“激活”。

Vue SSR 相比 SPA（单页应用）好处及坏处

1、好处

改善搜索引擎优化，因为搜索引擎爬虫可以直接查看完全渲染的页面。

这减少了检索内容所需的时间，尤其是在网络速度较慢的情况下或在速度较慢的设备上。

2、坏处

1）由于开发条件的限制。浏览器特定的代码只能在某些生命周期挂钩函数中使用。某些外部库可能需要特殊处理才能在服务器渲染的应用程序中运行。

2) 与构建设置和部署相关的附加要求。与可以部署到任何静态文件服务器的完全静态单页应用程序(SPA) 不同，服务器渲染的应用程序必须驻留在Node.js 服务器执行环境中。

3）增加了服务器端的负载。使用Node.js 渲染完整的应用程序显然比仅提供静态文件的服务器消耗更多的CPU 资源（CPU 密集型），因此如果您希望在高流量环境中使用它，请相应地准备您的服务器负载并明智地采用您的缓存策略。

具体的SSR实现稍后再讨论.

计算机网络

HTTP缓存

你知道302状态码是什么吗？您在浏览网页时遇到过哪些302场景？

常见的HTTP请求方式有哪些，它们有什么区别，有什么用途？

HTTPS具体流程是什么？

握手3次和握手4次

你知道TCP滑动窗口吗？

WebSocket 和Ajax 的区别

你了解WebSocket 吗？

HTTP是如何实现长连接的呢？

TCP 如何确保有效的传输和拥塞控制原则。

TCP协议如何保证可靠性？UDP为什么不可靠？

算法

链表

细绳

数组问题

二叉树

排序算法

二分查找

动态规划

广度FS

堆

深度FS

回溯算法

以上关于如何SEO优化你的#Vue开发网站的相关内容来源仅供参考。相关信息请参见官方公告。