这里优化SEO重点说vue-cli框架，毕竟是spa项目，所以SEO十分不友好，原因在于它自身并不是静态html，而是由js动态生成的(通过文档碎片劫持的方式以及Object.defineProperties等方法，有兴趣可以去研究研究vue的原理)，导致最后打包完成后只有一个光秃秃的静态index.html入口,大致内容就是外部引入了几个js，剩余的文件就只有static中的js、css、img等，大致是下面那样
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.a284e1968f2c7ea25dee.js></script>
<script type=text/javascript src=/static/js/vendor.0c201074b2f24cdc8eab.js></script>
<script type=text/javascript src=/static/js/app.df67f5e39e857cdc0ca8.js></script>
</body>
</html>
当蜘蛛（搜索引擎的爬虫）要抓取网页时候只会对静态html就行关键字匹配，而js文件是不执行的，所有相当于蜘蛛只爬到了上面的html代码，这对SEO十分不友好，而预渲染的目的就是对你的路由页面生成对应的静态html，让蜘蛛能获取更多关于你页面的信息从而增强SEO（一般针对交互性不强的网页，比如宣传页，交互性强的建议去研究ssr服务端渲染），这里使用的插件就是vue官网推荐的prerender-spa-plugin插件，不过在此之前你需要把路由从hash模式转换到history模式,在router中index.js设置
mode : 'history',
安装插件
npm install prerender-spa-plugin
开始配置插件，由于预渲染的过程是在打包的时候，所以在build文件中的webpack.prod.conf.js文件中设置
const PrerenderSPAPlugin = require('prerender-spa-plugin');
//在plugins中增加代码，其他原来的代码不要动
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../dist'),
routes: [
'/',
'/home/index',
'/home/solveIndex',
'/home/store',
'/home/business',
'/home/end',
'/home/enterprise',
'/home/network',
'/home/mall',
'/home/apply',
'/home/cooperation',
'/home/contactUs',
'/home/project',
'/home/product',
'/home/aboutUs',
'/home/manResources',
],
}),
]
这里解释一下这个在干嘛，它主要就是找到dist文件，访问routes数组下的每个元素值（相当于访问路由），并把静态页面打包到对应路径,比如routes中的’/home/index’这个路由，将打包到dist/home/index.html中。网上很多说要配置Renderer然后在main.js中进行对应，其实没有必要
接下来配置config下的index.js文件，找到build属性进行配置
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'h7/static',
assetsPublicPath: '/',
}
assetsSubDirectory 原来的参数是static，之所以加了个h7是因为把这个项目放到根目录的h7文件夹下（如果你的项目是根目录这个属性就不要改，还是static就好），assetsPublicPath一定要是’/’，不然预渲染的时候会卡住（具体原因我也不明白，可能还是我太菜）
最后一步，在稍微配置一下router，顺便贴出来我的router代码，也为了更好理解上面插件routes
import Vue from 'vue'
import Router from 'vue-router'
const index = ()=> import('@/components/index');
const solveIndex = ()=> import('@/components/solution/index');
const business = ()=> import('@/components/solution/business');
const end = ()=> import('@/components/solution/end');
const enterprise = ()=> import('@/components/solution/enterprise');
const mall = ()=> import('@/components/solution/mall');
const network = ()=> import('@/components/solution/network');
const store = ()=> import('@/components/solution/store');
const apply = ()=> import('@/components/apply/index');
const cooperation = ()=> import('@/components/cooperation/index');
const contactUs = ()=> import('@/components/contactUs/index');
const project = ()=> import('@/components/project/index');
const product = ()=> import('@/components/product/index');
const aboutUs = ()=> import('@/components/aboutUs/index');
const manResources = ()=> import('@/components/manResources/index');
const templateParent = ()=> import('@/components/templateParent');
Vue.use(Router);
export default new Router({
mode : 'history',
base :'/h7',
routes: [
{
path: '/',
redirect: '/home/index'
},
{
path:'/home',
component:templateParent,
children:[
{path:'index',name:'首页' ,component:index},
{path:'solveIndex',name:'解决方案' ,component:solveIndex},
{path:'store',name:'店铺' ,component:store},
{path:'business',name:'商业' ,component:business},
{path:'end',name:'末端' ,component:end},
{path:'enterprise',name:'企业' ,component:enterprise},
{path:'network',name:'网点' ,component:network},
{path:'mall',name:'商城' ,component:mall},
{path:'apply',name:'应用体验',component:apply},
{path:'cooperation',name:'合作伙伴',component:cooperation},
{path:'contactUs',name:'联系我们',component:contactUs},
{path:'project',name:'项目案例',component:project},
{path:'product',name:'产品实例',component:product},
{path:'aboutUs',name:'关于我们',component:aboutUs},
{path:'manResources',name:'人力资源',component:manResources}
]
}
]
})
这里主要配置base，在history模式下，项目不在根目录的时候需要这么做,因为项目是放在根路径的h7文件夹下，所有要在渲染路径前增加h7路径（如果你的项目放根目录下这个base属性就不用加了，上面assetsSubDirectory属性的h7也不要加）
至此一切以准备就绪输入npm run build开始打包吧，会出现3个文件夹，一个home文件夹(这里看你路由这么写不一定)，一个index.html，一个h7文件（这里也是看你是否放在h7目录中），一个index，html
首先针对项目不是根目录的（放h7下的），把最外层的index.html（和home同级）删掉，把h7文件夹中的static文件夹拿到最外面（和home同级），把h7文件夹中index.html拿到最外面（和home同级），变成下面这种结构。（楼主太菜，找不到好的解决办法，只能先这么移了，这里主要解决页面引用资源404问题）
解释一下上面图，从h7文件夹中找到static和index拿到最外面，覆盖了原来的index.html,并删除h7文件夹
如果你的项目是放在根路径（没有h7的情况），会出现3个文件home，static，index.html，直接部署到你的服务器就行了不用移动文件，如下图
几个坑 和 疑惑
1、打开的时候白屏，一般几种可能，你的文件移动错了导致资源加载404，还有就是你的history配置的问题，导致路由渲染失败，解决方案就是上面所说的加base参数
2、本文主要针对项目不是放在根目录下的，如果你是放根目录的配置完插件和history模式之后就可以直接发布了，不用管h7文件夹打包路径和渲染路径了
3、打包时候卡住，assetsPublicPath记得设置成’/’
4、本文所说的h7文件是楼主自己在根路径创建的文件夹，名字不一定是这个主要看你怎么命名了
其他SEO优化
SEO优化网上也提到了很多，几个要点meta便签、h1、h2标签、title的显示，图片的alt等
1、使用vue-meta-info插件，改变link、title、meta等
npm install vue-meta-info
//main.js
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo);
//在你的路由页面中加
export default {
metaInfo: {
//改变当前路由的title
title: 'title',
//改变当前路由的link
link: [
{
rel: 'baidu',
href: 'https://www.baidu.com/'
},
],
},
data(){
return{}
}
}
2、每个路由页面都需要有一个h1(主要放关键字)，而且只能有一个，以及多个h2
3、图片加alt，蜘蛛对图片的描述信息是通过alt获取
3394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
