欧美亚洲精品一区,日韩电影中文字幕一区,欧美日韩国产一二三,美女100%一区

服務(wù)端渲染的模式就是：就是將本來要放在瀏覽器執(zhí)行創(chuàng)建的組件，放到服務(wù)端先創(chuàng)建好，然后生成對(duì)應(yīng)的html，在請(qǐng)求一個(gè)網(wǎng)址的時(shí)候，服務(wù)端收到請(qǐng)求之后把html的內(nèi)容先生成好然后再返回給瀏覽器。這樣子搜索引擎就可以通過你返回的a標(biāo)簽抓取到網(wǎng)站的其他頁面了，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序

Vue SSR 相比 SPA（單頁應(yīng)用）好處及壞處
好處

更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
更快的內(nèi)容到達(dá)時(shí)間(time-to-content)，特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。
壞處

開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù)(lifecycle hook)中使用；一些外部擴(kuò)展庫(kù)(external library)可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序(SPA)不同，服務(wù)器渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境。
更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源(CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境(high traffic)下使用，請(qǐng)準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。
 

 

SSR原理
這是vue.js官方的SSR原理介紹圖，從這張圖片，我們可以知道：我們需要通過Webpack打包生成兩份bundle文件：

Client Bundle，給瀏覽器用。和純Vue前端項(xiàng)目Bundle類似
Server Bundle，供服務(wù)端SSR使用，一個(gè)json文件
不管你項(xiàng)目先前是什么樣子，是否是使用vue-cli生成的。都會(huì)有這個(gè)構(gòu)建改造過程。在構(gòu)建改造這里會(huì)用到 vue-server-renderer 庫(kù)，這里要注意的是 vue-server-renderer 版本要與Vue版本一樣。

Vue SSR實(shí)例（構(gòu)建基于vue-cli3 的SSR應(yīng)用程序）
創(chuàng)建一個(gè)vue項(xiàng)目

vue create ssr-example 
............這里就i不再過多的說明了，就正常的創(chuàng)建一個(gè)vue項(xiàng)目的流程

進(jìn)行SSR改造—安裝需要的包

安裝 vue-server-renderer
安裝 lodash.merge
安裝 webpack-node-externals
安裝 cross-env
npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --save-dev
進(jìn)行SSR改造—在服務(wù)器中集成

安裝koa2，然后在項(xiàng)目根目錄下新建一個(gè)server.js

npm install koa koa-static --save
進(jìn)行SSR改造—在koa2集成ssr

源碼:

----------------------------------------------------------------------------------

// 第 1 步：創(chuàng)建一個(gè) Vue 實(shí)例
const Vue = require('vue')
 
const Koa = require('koa')
const app = new Koa()
// 第 2 步：創(chuàng)建一個(gè) renderer
const renderer = require('vue-server-renderer').createRenderer()
 
 
// 第 3 步：添加一個(gè)中間件來處理所有請(qǐng)求
app.use(async (ctx, next) => {
  const vm = new Vue({
    data: {
      title: "ssr example",
      url: ctx.url
    },
    template: `<div>訪問的 URL 是： {{ url }}</div>`
  })
  // 將 Vue 實(shí)例渲染為 HTML
  renderer.renderToString(vm, (err, html) => {
    if(err){
      res.status(500).end('Internal Server Error')
      return
    }
    ctx.body = html
  })
})
 
const port = 3000
app.listen(port, function() {
  console.log(`server started at localhost:${port}`)
})
--------------------------------------------------------------------------------------

看到這個(gè)說明一個(gè)簡(jiǎn)單的ssr構(gòu)建成功了。

不過到目前為止，我們并沒有將客戶端的.vue文件通過服務(wù)端進(jìn)行渲染，那么如何將前端的.vue文件與后端node進(jìn)行結(jié)合呢？

進(jìn)行SSR改造—改造前端配置，以支持SSR

修改源碼結(jié)構(gòu)

在src目錄下新建兩個(gè)文件，一個(gè)entry-client.js 僅運(yùn)行于瀏覽器 一個(gè)entry-server.js 僅運(yùn)行于服務(wù)器
修改main.js
main.js 是我們應(yīng)用程序的「通用 entry」。在純客戶端應(yīng)用程序中，我們將在此文件中創(chuàng)建根 Vue 實(shí)例，并直接掛載到 DOM。但是，對(duì)于服務(wù)器端渲染(SSR)，責(zé)任轉(zhuǎn)移到純客戶端 entry 文件。app.js 簡(jiǎn)單地使用 export 導(dǎo)出一個(gè) createApp 函數(shù)：

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from "./router"
import store from './store'
 
Vue.config.productionTip = false
 
// 導(dǎo)出一個(gè)工廠函數(shù)，用于創(chuàng)建新的
// 應(yīng)用程序、router 和 store 實(shí)例
export function createApp () {
  const router = createRouter()
  const app = new Vue({
    router,
    store,
    // 根實(shí)例簡(jiǎn)單的渲染應(yīng)用程序組件。
    render: h => h(App)
  })
  return { app }
}
修改entry-client.js

客戶端 entry 只需創(chuàng)建應(yīng)用程序，并且將其掛載到 DOM 中

import { createApp } from './main'
 
// 客戶端特定引導(dǎo)邏輯……
const { app } = createApp()
 
// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')
修改entry-server.js

服務(wù)器 entry 使用 default export 導(dǎo)出函數(shù)，并在每次渲染中重復(fù)調(diào)用此函數(shù)。

import { createApp } from './main'
 
export default context => {
  // 因?yàn)橛锌赡軙?huì)是異步路由鉤子函數(shù)或組件，所以我們將返回一個(gè) Promise，
  // 以便服務(wù)器能夠等待所有的內(nèi)容在渲染前，
  // 就已經(jīng)準(zhǔn)備就緒。
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
 
    // 設(shè)置服務(wù)器端 router 的位置
    router.push(context.url)
 
    // 等到 router 將可能的異步組件和鉤子函數(shù)解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // 匹配不到的路由，執(zhí)行 reject 函數(shù)，并返回 404
      if (!matchedComponents.length) {
        return reject({
          code: 404
        })
      }
      // Promise 應(yīng)該 resolve 應(yīng)用程序?qū)嵗?，以便它可以渲?br />       resolve(app)
    }, reject)
  })
}
修改router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
 
Vue.use(Router)
 
export default new Router({
  mode: 'history', // 一定要是history模式
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

修改webpack配置

在vue-cli3創(chuàng)建的vue項(xiàng)目，已經(jīng)沒有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那么如何進(jìn)行webpack的配置呢？

在vue-cli官網(wǎng)上也說明了如何使用。 調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js 中的 configureWebpack 選項(xiàng)提供一個(gè)對(duì)象，該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。

在項(xiàng)目根目錄下，新建一個(gè)vue.config.js

const VueSSRServerPlugin = require("vue-server-renderer/server-plugin")
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin")
const nodeExternals = require("webpack-node-externals")
const merge = require("lodash.merge")
const TARGET_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGET_NODE ? "server" : "client"
 
 
module.exports = {
  configureWebpack: () => ({
    // 將 entry 指向應(yīng)用程序的 server / client 文件
    entry: `./src/entry-${target}.js`,
    // 對(duì) bundle renderer 提供 source map 支持
    devtool: 'source-map',
    target: TARGET_NODE ? "node" : "web",
    node: TARGET_NODE ? undefined : false,
    output: {
      libraryTarget: TARGET_NODE ? "commonjs2" : undefined
    },
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化應(yīng)用程序依賴模塊?？梢允狗?wù)器構(gòu)建速度更快，
    // 并生成較小的 bundle 文件。
    externals: nodeExternals({
      // 不要外置化 webpack 需要處理的依賴模塊。
      // 你可以在這里添加更多的文件類型。例如，未處理 *.vue 原始文件，
      // 你還應(yīng)該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
      whitelist: [/.css$/]
    }),
    optimization: {
      splitChunks: {
        chunks: "async",
        minSize: 30000,
        minChunks: 2,
        maxAsyncRequests: 5,
        maxInitialRequests: 3
      }
    },
    plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        merge(options, {
          optimizeSSR: false
        })
      })
  }
}
修改package，在scripts下面新增三個(gè)腳本來生成bundle.json

"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
"build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
執(zhí)行命令

npm run build:win
在dist目錄下會(huì)生成兩個(gè)json文件



改造server.js 代碼

const fs = require('fs')
const Koa = require('koa')
const path = require('path')
const koaStatic = require('koa-static')
const app = new Koa()
 
const resolve = file => path.resolve(__dirname, file)
// 開放dist目錄
app.use(koaStatic(resolve('./dist')))
 
// 第 2 步：獲得一個(gè)createBundleRenderer
const { createBundleRenderer } = require('vue-server-renderer')
const bundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
 
const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template: fs.readFileSync(resolve('./src/index.temp.html'), 'utf-8'),
  clientManifest: clientManifest
})
 
function renderToString(context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html)
    })
  })
}
// 第 3 步：添加一個(gè)中間件來處理所有請(qǐng)求
app.use(async (ctx, next) => {
  const context = {
    title: 'ssr test',
    url: ctx.url
  }
  // 將 context 數(shù)據(jù)渲染為 HTML
  const html = await renderToString(context)
  ctx.body = html
})
 
const port = 3000
app.listen(port, function() {
  console.log(`server started at localhost:${port}`)
})
運(yùn)行server.js

node server.js
訪問 localhost:3000，可以看到頁面的數(shù)據(jù)都是又服務(wù)端渲染完成后返回的。到這一步已經(jīng)基本算完成了SSR的構(gòu)建了。

如果有問題的話，可以把dist目錄下的index.html文件刪了。避免直接訪問到了該html文件

恩尼斯網(wǎng)站開發(fā)定制網(wǎng)站轉(zhuǎn)載