安装prerender-spa-plugin和vue-meta-info
cnpm install prerender-spa-plugin vue-meta-info --save
2. vue cli2.x在
build/webpack.prod.conf.js文件下plugins数组里面加入以下代码
// seo优化 new PrerenderSpaPlugin( //将渲染的文件放到dist目录下 path.join(__dirname, '../dist'), //需要预渲染的路由信息 ['/index', '/about'], { //在一定时间后再捕获页面信息，使得页面数据信息加载完成 captureAfterTime: 30000, //忽略打包错误 ignoreJSErrors: true, phantomOptions: '--web-security=false', maxAttempts: 10, }, )
这一步完成以后项目运行npm run build以后就能在
dist文件夹下面生成index和about文件夹里面存在对应的html文件
3.然后在main.js文件下将vue-meta-info全局挂载
import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)
4.最后一步在想要添加不同的seo的对应vue文件内加入
// Seo优化 metaInfo: { title: "我是首页", meta: [ { name: "keywords", content: "首页111,首页222,首页333", }, { name: "description", content: "这是一段首页的描述", }, ], },
5.这样就完成了对应的vue页面的seo优化
