这里优化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',

然后对后台服务器进行对应设置，可以参照vue官网描述，很简单，https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子/

安装插件

 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获取

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue