凡科轻站小程序_vue效劳端烘托操作简略入门实例

日期:2021-01-07 类型:行业动态 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

vue服务端渲染操作简单入门实例分析       这篇文章主要介绍了vue服务端渲染操作,结合简单实例形式分析了vue.js服务端渲染操作的原理、实现方法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了vue服务端渲染操作。分享给大家供大家参考,具体如下:

想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目。然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好。

话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!!

一,首先实现下官网的基本案例

随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json;创建server.js;然后按照vue-ssr官方链接:教程里面介绍的server.js,复制教程里面代码,如下

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) = {
 const app = new Vue({
 data: {
 url: req.url
 template: ` div 访问的 URL 是: {{ url }} /div `
 renderer.renderToString(app, (err, html) = {
 if (err) {
 res.status(500).end('Internal Server Error')
 return
 res.end(`
 !DOCTYPE html 
 html lang="en" 
 head title Hello /title /head 
 body ${html} /body 
 /html 
server.listen(8080)

显然需要按照上面引入的依赖vue,express和vue-server-renderer,安装完毕,在终端执行,node server.js,打开浏览器,,不出意外会是乱码,因为官网的返回的html字符串里面没有 meta charset="utf-8" ,而加上这个 就好了。

当然还可以引入一个模板文件,同样是官网的案例,此时的server.js为

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
 ', 'utf-8')
server.get('*', (req, res) = {
 const app = new Vue({
 data: {
 url: req.url
 template: ` div 访问的 URL 是: {{ url }} /div `
 renderer.renderToString(app, (err, html) = {
 if (err) {
 res.status(500).end('Internal Server Error')
 return
 res.end(html)
server.listen(8080)
<

 !DOCTYPE html 
 html lang="en" 
 head title Hello /title /head 
 body 
 !-- 下面这个注释必须有 -- 
 !--vue-ssr-outlet-- 
 /body 
 /html 

上面注释根据官网教程,是vue注入的位置标记。然后同样执行,node server.js就可以了。

是不是很简单,还可以创建一个对象来改变模板的标题和meta,这个时候的server.js和模板文件代码分别是

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
 ', 'utf-8')
server.get('*', (req, res) = {
 const context = {
 title: 'hello',
 meta: `
 meta ... 
 meta ... 
 `,url:req.url
 const app = new Vue({
 data: {
 url: req.url
 template: ` div 访问的 URL 是: {{ url }} /div `
 renderer.renderToString(app, context,(err, html) = {
 if (err) {
 res.status(500).end('Internal Server Error')
 return
 res.end(html)
server.listen(8080)

这里说下我的理解,vue服务端渲染实际是一套代码的两次应用,所谓的一套代码就是拿出server.js外面去的vm实例,上面之所以简单是因为我们在server内部创建的vm实例,一旦将vm拿出去,在server.js外部引入,那么涉及的就麻烦了。

这里分两条线说,一个是在server.js外面创建一个app.js;结果是无法引入到server中;而这个也不是关注的重点;

另一条线是使用vue-loader创建一个vm实例,然后引入到server中,整个vue渲染就在解决这个问题,解决引入的问题,解决引入之后与前端混合的问题。下面贴上简单案例的实现代码。

因为不能直接应用.vue文件以及外部的js文件,所以需要借助webpack,借助webpack将vue实例,转译为node可用代码,以及对前端代码进行转译。

二,以vue init webpack-simple vuessr0 为基础的vue-ssr案例

1)用vue-cli也就是vue脚手架建了一个简单模板,命令:vue init webpack-simple vuessr0,相信对此都比较熟悉,建好后的结构如下

之后改造一下,创建几个文件app.js,entry-client.js,entry-server.js,创建build目录,删除自动生成的webpack.config.js文件,改之后的目录结构为

各个文件的作用,entry-server.js将vm实例,转译为node可用代码;

entry-client.js和传统前端处理一致。

好吧,github链接地址为:mstzhen/vue-ssr;我实在有点懒了。

需要说明的是,webpack将一份文件打包为两份,前端入口文件的作用是挂载到id上面,后端入口文件以及后端文件负责注入。

首先安装依赖:npm install;

然后依次

npm run build:client
npm run build:server
npm run dev

8080端口访问即可。

最后,本文只是对vue服务端官网最简单那个实例的实现。没有使用vue-router,没有vuex,更没有服务端数据请求。希望对正在学习vue服务端学习的小伙伴有所帮助。

错误之处,请指出。