普通vue cli初始專案轉為服務端渲染SSR

2021-10-10 17:19:36 字數 4016 閱讀 4990

1、第一步沒啥好說的，利用vue-cli腳手架建立乙個demo專案：

vue init webpack vue-ssr-demo


cd vue-ssr-demo


npm install
2、安裝ssr依賴的模組：

npm i -d vue-server-renderer
3、隨便加乙個components/test.vue

just a test page.
4、src目錄下建立倆js檔案：

src


├── entry-client.js # 僅執行於瀏覽器


└── entry-server.js # 僅執行於伺服器
5、修改router/index.js

import vue from 'vue'


import router from 'vue-router'


import helloworld from '@/components/helloworld'


vue.use(router)


export function createrouter () , ]})


}
6、修改main.js裡路由的引入：

// the vue build version to load with the `import` command


// (runtime-only or standalone) has been set in webpack.base.conf with an alias.


import vue from 'vue'


import  from './router'


// 建立 router 例項


const router = new createrouter()


// 注入 router 到根 vue 例項


router,})}
7、在entry_client.js裡面寫上如下內容：

router.onready(() => )

if (!activated.length)

// 這裡如果有載入指示器 (loading indicator)，就觸發

promise.all(activated.map(c => )

}})).then(() => ).catch(next)

})})

8、在entry_server.js裡寫如下內容：

export default context => )

}// promise 應該 resolve 應用程式例項，以便它可以渲染

}, reject)

})}

9、在build資料夾下新增乙個webpack.server.conf.js，寫上：

const webpack = require('webpack')


const merge = require('webpack-merge')


const base = require('./webpack.base.conf.js')


const nodeexternals = require('webpack-node-externals')


const vuessrserverplugin = require('vue-server-renderer/server-plugin')


module.exports = merge(base, ,


resolve: 


},// 


// externals: nodeexternals(),


plugins: [


new webpack.defineplugin(),


new vuessrserverplugin()


]})
10、在webpack.prod.conf.js中加上：

const vuessrclientplugin = require('vue-server-renderer/client-plugin') // 開頭引入這個


....


new webpack.defineplugin(),


....


new vuessrclientplugin()  // plugins陣列裡最後加乙個這個
11、修改webpack.base.conf.js的entry：

entry: ,
12、配置package.json增加打包伺服器端構建命令並修改原打包命令：

"build:client": "node build/build.js",


"build:server": "cross-env node_env=production webpack --config build/webpack.server.conf.js --progress --hide-modules",


"build": "rimraf dist && npm run build:client && npm run build:server"
13、根目錄新建乙個index.template.html模板頁面（或者直接修改原index.html，只是這樣要區分生產環境和開發環境，否則run dev的時候就不ok）：
14、根目錄下新建乙個server.js（沒安裝express的先npm install express）:

const express = require('express');


const fs = require('fs');


const path = require('path');


const  = require('vue-server-renderer');


const serverbundle = require('./dist/vue-ssr-server-bundle.json');


const clientmanifest = require('./dist/vue-ssr-client-manifest.json');


const template = fs.readfilesync(path.resolve('./index.template.html'), 'utf-8'); // 這裡就看13步驟裡你是哪個檔案


const render = createbundlerenderer(serverbundle, );


const context = 


render.rendertostring(context, (err, html) => )


})const port = 3003;


console.log(`server started at localhost:$`);


});
15、準備就緒了兄弟們，因為是本地執行，偷偷把"build:server"裡的node_env先等於development，執行：

npm run build
之後可以看到生成了dist目錄：

16、然後，執行：

node server
成功啟動server started at localhost:3003

開啟localhost:3003，在控制台network裡看到如下，ssr服務端渲染成功。

專案初始化 vue cli

一 輸入命令 vue init template name project name template name 有5種 webpack 常用 webpack browserfy browserfy project name 二 之後跟著提示輸入命令 porject name 專案名 盡量不要大寫 ...

VUE CLI初始化專案

用vue init命令來初始化專案，具體使用方法如下 vue init init 表示要用vue cli來初始化專案 表示模板名稱，vue cli官方提供的5種模板 webpack 乙個全面的webpack vue loader的模板，功能包括熱載入，linting,檢測和css擴充套件。webpa...

使用vue cli初始化vue專案

在專案中使用vue我使用vue cli腳手架搭建專案 1.先安裝nodejs 2.使用npm install g vue cli npm install g nrm nrm ls 即可檢視npm 的源利器有哪些 nrm use 切換npm的源利器 3.vue version 4.vue init w...