国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始搭建一個vue-ssr(下)

Jochen / 809人閱讀

摘要:開始改建補充安裝依賴與上一次不同,這次我們基于進行改建,已經有了很多依賴庫了,但我們任需要補充一個核心修改客戶端的配置修改文件,添加插件添加了這個配置以后,重新啟動項目通過地址就可以訪問到,頁面中出現的內容就是所需要的。

從零開始搭建一個vue-ssr 前言

上次我們已經實現了從零開始,搭建一個簡單的vue-ssr的demo:從零開始搭建一個vue-ssr(上)。那么這次呢,我們基于vue-cli,進行webpack的改造,實現vue-cli版本的vue-ssr。

開始改建 補充安裝依賴

與上一次不同,這次我們基于vue-cli進行改建,已經有了很多依賴庫了,但我們任需要補充一個核心:

npm install vue-server-renderer
修改客戶端的webpack配置

修改webpack.dev.conf.js文件,添加插件

const vueSSRClientPlugin = require("vue-server-renderer/client-plugin");

const devWebpackConfig = merge(baseWebpackConfig,{
    plugins:[
        new vueSSRClientPlugin()
    ] 
});

添加了這個配置以后,重新啟動項目通過地址就可以訪問到vue-ssr-client-manifest.json(http://localhost:8082/vue-ssr-client-manifest.json),頁面中出現的內容就是所需要的client-bundle。

修改vue的相關文件

此步驟跟從零開始搭建一個vue-ssr(上)大有相似,不重復描述,直接上代碼:
修改 router/index.js

import vueRouter from "vue-router";
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld";
import About from "@/components/About";

Vue.use(vueRouter);
export default () => {
  return new vueRouter({
    mode:"history",
    routes:[
      {
        path:"/",
        component:HelloWorld,
        name:"HelloWorld"
      },
      {
        path:"/about",
        component:About,
        name:"About"
      }
    ]
  })
}

修改app.js

import Vue from "vue";
import createRouter from "./router";
import App from "./App.vue";

export default (context) => {
  const router = createRouter();
  const app = new Vue({
    router,
    components: { App },
    template: ""
  });
  return {
    app,
    router
  }
}

修改entry-server.js

import createApp from "./app.js";

export default (context) => {
    return new Promise((reslove,reject) => {
        let {url} = context;
        let {app,router} = createApp(context);
        router.push(url);
        router.onReady(() => {
            let matchedComponents = router.getMatchedComponents();
            if(!matchedComponents.length){
                return reject();
            }
            reslove(app);
        },reject)
    })
}

修改entry-client.js

import createApp from "./app.js";
let {app,router} = createApp();

router.onReady(() => {
    app.$mount("#app");
});
修改webpack客戶端入口以及輸出

修改webpack.base.conf.js

module.exports = {
    entry:{
        app:"./src/entry-client.js"
    },
    output:{
        publicPath:"http://localhost:8080/"
    }
};
創建服務端webpakc配置文件

創建build/webpack.server.conf.js文件,目的將插件vue-server-renderer/server-plugin引入server端執行。

const webpack = require("webpack");
const merge = require("webpack-merge");
const base = require("./webpack.base.conf");
//  手動安裝
//  在服務端渲染中,所需要的文件都是使用require引入,不需要把node_modules文件打包
const webapckNodeExternals = require("webpack-node-externals");


const vueSSRServerPlugin = require("vue-server-renderer/server-plugin");

module.exports = merge(base,{
    //  告知webpack,需要在node端運行
    target:"node",
    entry:"./src/entry-server.js",
    devtool:"source-map",
    output:{
        filename:"server-buldle.js",
        libraryTarget: "commonjs2"
    },
    externals:[
        webapckNodeExternals()
    ],
    plugins:[
        new webpack.DefinePlugin({
            "process.env.NODE_ENV":""development"",
            "process.ent.VUE_ENV": ""server""
        }),
        new vueSSRServerPlugin()
    ]
});

創建build/dev-server.js,拿到客戶端和服務端的bundle文件以及讀取到index.html中的模板用作渲染。

const serverConf = require("./webpack.server.conf");
const webpack = require("webpack");
const fs = require("fs");
const path = require("path");
//  讀取內存中的.json文件
//  這個模塊需要手動安裝
const Mfs = require("memory-fs");
const axios = require("axios");

module.exports = (cb) => {
    const webpackComplier = webpack(serverConf);
    var mfs = new Mfs();
    
    webpackComplier.outputFileSystem = mfs;
    
    webpackComplier.watch({},async (error,stats) => {
        if(error) return console.log(error);
        stats = stats.toJson();
        stats.errors.forEach(error => console.log(error));
        stats.warnings.forEach(warning => console.log(warning));
        //  獲取server bundle的json文件
        let serverBundlePath = path.join(serverConf.output.path,"vue-ssr-server-bundle.json");
        let serverBundle = JSON.parse(mfs.readFileSync(serverBundlePath,"utf-8"));
        //  獲取client bundle的json文件
        let clientBundle = await axios.get("http://localhost:8082/vue-ssr-client-manifest.json");
        //  獲取模板
        let template = fs.readFileSync(path.join(__dirname,"..","index.html"),"utf-8");
        cb && cb(serverBundle,clientBundle,template);
    })
};

在根目錄下創建server.js文件,用于啟動服務,并利用createBundleRenderer將兩個Bundle和html模板渲染出來。

const devServer = require("./build/dev-server.js");
const express = require("express");
const app = express();
const vueRender = require("vue-server-renderer");

app.get("*",(request,respones) => {
    respones.status(200);
    respones.setHeader("Content-Type","text/html;charset-utf-8;");
    devServer((serverBundle,clientBundle,template) => {
        let render = vueRender.createBundleRenderer(serverBundle,{
            template,
            clientManifest:clientBundle.data,
            //  每次創建一個獨立的上下文
            renInNewContext:false
        }); 
        render.renderToString({
            url:request.url
        }).then((html) => {
            respones.end(html);
        }).catch(error => {
          respones.end(JSON.stringify(error));
        });
    });
})

app.listen(5001,() => {
    console.log("服務已開啟")
});
補充一個html模板

根目錄下創建index.html



  
    
    
    vue_cli_ssr
  
  
    

最后在package.json中添加一個啟動服務端的命令:

"server": "node server.js"

大功告成,開啟兩個終端,分別輸入

npm run dev
npm run server

瀏覽器打開localhost:8082,我們便可以看到由vue-cli改造而成的vue-ssr。

總結

本文是直接基于vue-cli進行改造的一個ssr版本,若想從零開始手撕vue-ssr,可以看上一篇文章從零開始搭建一個vue-ssr(上)。

項目源碼

https://github.com/TheWalking...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105153.html

相關文章

  • 從零開始搭建一個vue-ssr(上)

    摘要:從零開始搭建一個背景是什么全拼是,服務端渲染。大家不妨可以打開一些頁面或者一些公司的網站,查看源代碼,你會發現,也是有這個標記。這時候,我們發現頁面的路由切換生效了,并且不同頁面的源代碼也不一樣了。從零開始搭建一個下項目源碼 從零開始搭建一個vue-ssr 背景 What?SSR是什么? SSR全拼是Server-Side Rendering,服務端渲染。 所謂服務端渲染,指的是把...

    Winer 評論0 收藏0
  • vue服務端渲染demo將vue-cli生成的項目轉為ssr

    摘要:無需使用服務器實時動態編譯,而是使用預渲染方式,在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同,服務器渲染應用程序,需要處于運行環境。更多的服務器端負載。 目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...

    whinc 評論0 收藏0
  • 用vue搭建的個人博客介紹----mapblog小站

    摘要:后端主要使用的框架,數據庫采用。后臺管理登錄采用與后端進行登陸狀態的確認。本文首發于小站,這是一個積累和分享知識的個人博客 這篇文章擱置了很長時間,最終決定還是把它寫出來,給剛開始學習vue并且想用vue寫個人博客的同學一個參考。因為當初我也是參考了其他人分享的知識,從一個vue小白變成了一個入門級選手,并最終完成了這個個人博客的搭建工作,代碼已托管在Github-justJokee。...

    Ashin 評論0 收藏0
  • 每個前端猿都有一個開發屬于自己技術博客的心

    摘要:總算是今天成功把自己的孩子托付到阿里云的服務器上面了。中間還遇到很多很多坑最后看這自己所部署的三個網站安靜的躺在自己租的阿里云上。 一把桌子,一臺電腦,一瓶紅牛,一包紙巾,從白天到黑夜。歷經一個多月的時間,從零到構思到設計,從設計到vue-ssr 的框架設計,然后再從前端的業務邏輯代碼的實現,從 后臺nodejs 的 koa2框架到數據庫的設計到后端的業務邏輯的代碼實現,從購買阿里云服...

    wslongchen 評論0 收藏0

發表評論

0條評論

Jochen

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<