如何搭建一個基於 Egg + Webpack + Vue 的服務端渲染工程項目呢？

如何搭建一個基於 Egg + Webpack + Vue 的服務端渲染工程項目呢？
項目你能夠經過 easywebpack-cli 直接初始化便可完成或者clone egg-vue-webpack-boilerplate。下面說明一下從零如何搭建一個Egg + Webpack + Vue 的服務端渲染工程項目。

• 經過 egg-init 初始化 egg 項目

egg-init egg-vue-ssr
// choose Simple egg app

• 安裝 easywebpack-vue 和 egg-webpack

npm i easywebpack-vue --save-dev
npm i egg-webpack --save-dev

• 安裝 egg-view-vue 和 egg-view-vue-ssr

npm i egg-view-vue --save
npm i egg-view-vue-ssr --save

• 添加配置

在 ${app_root}/config/plugin.local.js 添加以下配置

exports.webpack = { enable: true, package: 'egg-webpack' }; exports.webpackvue = { enable: true, package: 'egg-webpack-vue' }; 

2. 在 ${app_root}/config/config.local.js 添加以下配置

const EasyWebpack = require('easywebpack-vue'); // 用於本地開發時，讀取 Webpack 配置，而後構建 exports.webpack = { webpackConfigList: EasyWebpack.getWebpackConfig() }; 

• 配置 ${app_root}/webpack.config.js

'use strict'; const path = require('path'); module.exports = { egg: true, framework: 'vue', entry: { include: ['app/web/page', { 'app/app': 'app/web/page/app/app.js?loader=false' }], exclude: ['app/web/page/[a-z]+/component', 'app/web/page/test', 'app/web/page/html', 'app/web/page/app'], loader: { client: 'app/web/framework/vue/entry/client-loader.js', server: 'app/web/framework/vue/entry/server-loader.js', } }, alias: { server: 'app/web/framework/vue/entry/server.js', client: 'app/web/framework/vue/entry/client.js', app: 'app/web/framework/vue/app.js', asset: 'app/web/asset', component: 'app/web/component', framework: 'app/web/framework', store: 'app/web/store' }, loaders: { eslint: false, less: false, // 沒有使用, 禁用能夠減小npm install安裝時間 stylus: false // 沒有使用, 禁用能夠減小npm install安裝時間 }, plugins: { provide: false, define: { args() { // 支持函數, 這裏僅作演示測試,isNode無實際做用 return { isNode: this.ssr }; } }, commonsChunk: { args: { minChunks: 5 } }, uglifyJs: { args: { compress: { warnings: false } } } } }; 

• 本地運行

node index.js 或 npm start

• Webpack 編譯文件到磁盤

// 首先安裝 easywebpack-cli 命令行工具
npm i easywebpack-cli -g
// Webpack 編譯文件到磁盤
easywebpck build dev/test/prod

項目開發

服務端渲染

在app/web/page 目錄下面建立 home 目錄, home.vue 文件, Webpack自動根據 .vue 文件建立entry入口, 具體實現請見 webpack.config.js

• home.vue 編寫界面邏輯, 根元素爲layout(自定義組件, 全局註冊, 統一的html, meta, header, body)

<template> <layout title="基於egg-vue-webpack-dev和egg-view-vue插件的工程示例項目" description="vue server side render" keywords="egg, vue, webpack, server side render"> {{message}} </layout> </template> <style> @import "home.css"; </style> <script type="text/babel"> export default { components: { }, computed: { }, methods: { }, mounted() { } } </script> 

• 建立controller文件home.js

exports.index = function* (ctx) { yield ctx.render('home/home.js', { message: 'vue server side render!' }); }; 

• 添加路由配置

app.get('/home', app.controller.home.home.index); 

前端渲染

• 建立controller文件home.js

exports.client = function* (ctx) { yield ctx.renderClient('home/home.js', { message: 'vue server side render!' }); }; 

• 添加路由配置

app.get('/client', app.controller.home.home.client);