服务端渲染:
1、将完整的html输出到客户端
2、要使用通用代码
优点 :
1、首次渲染快(无需等所有的js都完成下载)
2、利于seo
缺点:
1、更多的服务器负载
2、开发受限
3、需要处于node.js/php server 运行环境
预渲染:
1、使用少数营销页的seo
2、生成对特定路由静态的html文件
优点:
1、预渲染更简单
2、将前端作为一个完全静态的站点
缺点
1、若网站有成百上千条路线,预编译会非常缓慢
预渲染核心:prerender-spa-plugin
安装: cnpm install prerender-spa-plugin --save-dev
步骤
创建项目
vue create 001_prerender_spa
安装 prerender-spa-plugin
npm install prerender-spa-plugin --save-dev
配置 vue.config.js
在文件的根目录创建vue.config.js文件
官网上查看如何配置
https://www.npmjs.com/package/prerender-spa-plugin
// const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/', */ // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 例如 https://www.my-app.com/ // 如果你的应用部署在一个子路径下,那么你需要在这里 // 指定子路径。比如将你的应用部署在 // https://www.foobar.com/my-app/ // 那么将这个值改为 '/my-app/ // baseUrl: "/", // 构建好的文件输出到哪里 outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时,检查出的错误会触发编译失败 lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖 transpileDependencies: [ /* string or regex */ ], // 是否为生产环境构建生成sourceMap? productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md devServer: { port: 8081, proxy: { '/apis': { target: 'http://101.132.34.30/', changeOrigin: true, pathRewrite: { '^/apis': '' } } } }, configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'dist'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/', '/About', 'Text'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; } }
main.js配置
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; Vue.config.productionTip = false; new Vue({ router, store, mounted() { document.dispatchEvent(new Event('render-event'))}, render: h => h(App) }).$mount("#app");
打包完成后静态文件就会在dist文件夹中