通过vue-cli页面可以搭建spa单页面应用,但单页面项目不利于网站的SEO,现在vue也提供了预渲染,服务器渲染的相关操作,这里的介绍一种相对简单的,通过 prerender-spa-plugin来配置,将单页面变成多页面
第一步:引入依赖 prerender-spa-plugin
npm i prerender-spa-plugin --save-dev
第二步 :在vue.config.js配置
默认vue-cli3x项目是没有vue.config.js文件,这个要自己创建的,配置如下
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
publicPath: process.env.NODE_ENV == "production" ? "././" : './',
assetsDir: "./dist",
configureWebpack: config => {
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/', '/contact','/demo','/dev','/footer','/header','/home','/news','/scheme'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
// 这里是配置第三方的插件的
externals : {
AMap: "AMap",
}
};
}
};
第三步 : 在main.js 添加监听方法,这里的方法跟vue.config.js里面的方法名字要一致
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app');
第四步 : 在router文件的index.js 将路由的模式修改为 history。默认mode 是 hash
在这里要注意的 这里的资源打包默认都是在从根目录开始的,放在服务器也是根目录开始,如果不想要从根目录开始,要根据文件的话 就要配置一下 router的base,根据生产环境配置不同的路径
base: process.env.NODE_ENV == "production" ? "/office/dist" : './',
这里的目录名字要对应,看你怎么创建,就对应起来就可以了,而上图会发现编译出来的文件不在是一个页面了,而是多页面了
第五步:配置对应的meta参数
网站的关键字,介绍,相关信息这些也是重要的,而不同的页面 mete 的介绍也不同,这里使用 vue-meta-info,可以为不同的页面配置不同的meta,
1.引入vue-meta-info
npm i vue-meta-info --save-dev
2. 在main.js引入
import MetaInfo from "vue-meta-info"; //
Vue.use(MetaInfo);
3.在vue.js文件中使用,与生命周期同一级别,添加一个 metaInfo函数,返回一个对象
重新编译之后,你会发现在页面中,有你所添加的相关信息
如果觉得帮助到你,动动小手指点个赞吧!!!!!