vue网站优化（vue seo解决方案）

本文目录一览：

• 1、使用vue后怎么针对搜索引擎做SEO优化?
• 2、Vue项目优化
• 3、小记vue项目打包优化
• 4、vue 首屏页面性能优化

使用vue后怎么针对搜索引擎做SEO优化?

适用于vue的SEO优化方案，以下几种：

（1）ssr,即单页面后台渲染

（2）vue-meta-info 与prerender-spa-plugin 预渲染

（3）nuxt

（4）phantomjs

Vue项目优化

babel.config.js

通过if条件判断，只有在 production 阶段插件才会生效

通过命令行方式

通过可视化UI面板

运行 vue ui -任务- build 完成-分析

默认情况下，Vue项目的开发模式和发布模式共用同一个打包入口文件，即为 src/main.js 。为了将项目的开发过程和发布过程分离，可以指定两种打包入口

开发模式为 src/main-dev.js

发布模式为 src/main-prod.js

两中修改webpack配置的方式 configureWebpack 和 chainWebpack ，两者功能相同，只是使用方式不同，

vue.config.js

默认情况下，import导入的第三方依赖会被打包进同一个文件，造成文件体积过大进而影响加载速度。通过配置 externals 结点将需要全局导入的第三方依赖排除在打包文件外，可以有效减少打包体积

声明方式为 依赖包名: 注册名称 。其中注册名称必须和引入CDN资源之后的挂载在 window 上的对象名字一致，可以使用 console.log(window) 打印这个对象的名称。如果注册名称所指定的对象在window上找不到，将导致白屏。此外，如果引入的CDN资源在window上的挂载的对象名类似 xx-xx-xx (不符合js对象命名规范)，这种资源不能通过CDN导入，只能用Import方式。

vue.config.js

config.plugin('html') 使用 html 插件向模板中传递参数

css

js

如果 isProd 为true，CDN资源才会被导入

只有在访问到该路由时对应的资源文件才会被加载，建议不要将每个路由单独打包，而是通过 webpackChunkName 为多个路由指定同一个打包文件，这样可以减少请求的次数

router/index.js

完整配置

vue.config.js

main-prod.js

引入CDN后，将导入样式的语句注释或者删除，只保留导入JS的语句。

小记vue项目打包优化

开发vue的项目也有两三年了，从小白前端到小白前端，深感学无止境、学海无涯、活到老学到老呀

经常被听到：我们的网站好慢呀

因为最近的项目都放在国外，还以为是这个原因，再加上需求一堆一堆的来，也没时间去想优化的事儿。现在终于是闲了，借鉴各路大神的方法，这里做个小总结，以备下次忘记了，哈哈

优化方向：

其实就是一个目标，减少打包后的体积，减少首次加载的时间。

2.按需引入

项目中我用了 element-ui, 首页加载时， element-ui要在app.js之前加载，它的体积也不小，首页引入多少有点占资源，所以这里想尽可能只引入首屏需要的组件，其它组件按需加载就好。

element-ui官方有按需加载配置的例子，但由于在 vue.config.js中配置了三方包打成一个包，所以按需加载好像失效了，而我也不想每个页面都引用一下组件，所以就想了另外的方法

项目中我主要是针对首屏加载做了优化，我觉得只要首屏快速出来了，其它的就慢慢来吧，哈哈

还有其它的一些方向，路由懒加载，外部引入资源，这些都很容易了，就不罗列了

vue 首屏页面性能优化

访问

目前采用引入依赖包生产环境的 js 文件方式加载，直接通过 window 可以访问暴露出的全局变量，不必通过 import 引入，Vue.use 去注册

在 vue.config.js 中配置 externals

npm install babel-plugin-transform-remove-console --save-dev

（1）安装依赖

npm i compression-webpack-plugin@5.0.1 --save-dev

（2）在 vue.config.js 配置

关于vue网站优化和vue seo解决方案的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。