1. 項(xiàng)目初始化
1.1 通過 easywebpack-cli 腳手架初始化
安裝腳手架
npm install easywebpack-cli -g命令行迁匠，然后就可以使用easywebpack或easy命令命令行運(yùn)行
easywebpack init選擇 egg+vue server side render boilerplate 初始化骨架項(xiàng)目
安裝依賴
npm install
1.2 通過骨架項(xiàng)目初始化
git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git
npm install
初始化的項(xiàng)目提供多頁面和SPA(vue-router/axios)服務(wù)端渲染實(shí)例殿雪，可以直接運(yùn)行。
2. 項(xiàng)目運(yùn)行
2.1 本地運(yùn)行
npm start
npm start 做了如下三件事情
- 啟動 egg 應(yīng)用
- 啟動 Webpack 構(gòu)建, 文件不落地磁盤栖榨，構(gòu)建的文件都在內(nèi)存里面(只在本地啟動, 發(fā)布模式是提前構(gòu)建好文件到磁盤)
- 構(gòu)建會同時啟動兩個 Webpack 構(gòu)建服務(wù), 客戶端js構(gòu)建端口9000, 服務(wù)端端口9001
- 構(gòu)建完成，Egg應(yīng)用正式可用错英，自動打開瀏覽器
2.2 發(fā)布模式
- 構(gòu)建文件落地磁盤
npm run build 或 easywebpack build prod
- 啟動 Webpack 構(gòu)建秉宿，文件落地磁盤
- 服務(wù)端構(gòu)建的文件放到
app/view目錄 - 客戶端構(gòu)建的文件放到
public目錄 - 生成的
buildConfig.json和manifest.json放到config目錄 - 構(gòu)建的文件都是gitignore的，部署時請注意把這些文件打包進(jìn)去
- 運(yùn)行
啟動應(yīng)用前， 請?jiān)O(shè)置 EGG_SERVER_ENV 環(huán)境變量践叠，測試環(huán)境設(shè)置 test言缤， 正式環(huán)境設(shè)置 prod
npm start
3. 項(xiàng)目構(gòu)建
通過
easywebpack-cli統(tǒng)一構(gòu)建，支持 dev禁灼，test管挟，prod 模式構(gòu)建easywebpack-cli通過項(xiàng)目根目錄下的webpack.config.js配置文件構(gòu)造出 Webpack 實(shí)際的配置文件，配置項(xiàng)請見 webpack.config.js獲取 Webpack 實(shí)際的配置文件, egg-webpack 會使用到該功能弄捕。構(gòu)建會根據(jù)
webpackConfigList.length啟動對應(yīng)個數(shù)的 Webpack 編譯實(shí)例僻孝，這里會同時啟動兩個 Webpack 構(gòu)建服務(wù), 客戶端jsbundle構(gòu)建，端口9000, 服務(wù)端jsbundle構(gòu)建端口9001守谓。默認(rèn)端口為9000, 端口依次遞增穿铆。
// config/config.local.js 本地 npm start 使用
const EasyWebpack = require('easywebpack-vue');
exports.webpack = {
webpackConfigList:EasyWebpack.getWebpackConfig()
};
- 該項(xiàng)目中，
app/web/page目錄中所有 .vue 文件當(dāng)作 Webpack 構(gòu)建入口是采用 app/web/framework/vue/entry 的 client-loader.js 和 server-loader.js 模板實(shí)現(xiàn)的斋荞，這個需要結(jié)合webpack.config.js下的 entry.loader 使用荞雏。
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/app'],
loader: { // 如果沒有配置loader模板，默認(rèn)使用 .js 文件作為構(gòu)建入口
client: 'app/web/framework/vue/entry/client-loader.js',
server: 'app/web/framework/vue/entry/server-loader.js',
}
}
上面 { 'app/app': 'app/web/page/app/app.js?loader=false' } 這個 loader=false 的含義表示 app/web/page 目錄下的 app/app.js 不使用 entry.loader 模板平酿。因?yàn)檫@個app/app.js是一個SPA服務(wù)端渲染Example凤优，實(shí)現(xiàn)邏輯與其他普通的頁面不一樣，不能用 entry.loader 模板蜈彼， 這個功能在自定義entry文件構(gòu)建規(guī)范時使用筑辨。
4. 項(xiàng)目規(guī)范
- 遵循 egg 開發(fā)規(guī)范
- Vue 項(xiàng)目代碼放到 app/web 目錄，頁面入口目錄為 page幸逆，該目錄的 所有 vue 文件默認(rèn)會作為 Webpack 的 entry 構(gòu)建入口挖垛。建議每個頁面目錄的只保留一個vue文件，vue關(guān)聯(lián)的組件可以放到widget 或者 compnent目錄秉颗。如果非要放到當(dāng)前目前，請配置
webpack.config.jsentry.exclude 排除 vue文件送矩。
5. 項(xiàng)目開發(fā)
支持多頁面/單頁面服務(wù)端渲染, 前端渲染, 靜態(tài)頁面三種方式.
5.1 多頁面服務(wù)端渲染實(shí)現(xiàn)
5.1.1 多頁面前端頁面實(shí)現(xiàn)
在app/web/page 目錄下面創(chuàng)建home目錄, home.vue 文件, Webpack自動根據(jù).vue文件創(chuàng)建entry入口, 具體實(shí)現(xiàn)請見webpack.config.js
- home.vue 編寫界面邏輯, 根元素為layout(自定義組件, 全局注冊, 統(tǒng)一的html, meta, header, body, 你可以自定義 title蚕甥，description，keywords SEO信息栋荸，更多信息請擴(kuò)展layout).
<template>
<layout title="基于egg-vue-webpack-dev和egg-view-vue插件的工程示例項(xiàng)目" 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>
5.1.2 多頁面后端渲染實(shí)現(xiàn), 通過 egg-view-vue-ssr 插件 render 方法實(shí)現(xiàn)
- 創(chuàng)建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);
5.1.3 多頁面走前端渲染(后端路由)實(shí)現(xiàn), 通過 egg-view-vue-ssr 插件 renderClient 方法實(shí)現(xiàn)
- 創(chuàng)建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);
5.2 HTML靜態(tài)頁面前端渲染
直接有easywebpack構(gòu)建出靜態(tài)HTML文件, 請見
webpack.config.js配置和app/web/page/html代碼實(shí)現(xiàn)通過
egg-static靜態(tài)文件訪問HTML文件
5.3 單頁面服務(wù)器渲染同構(gòu)實(shí)現(xiàn)
5.3.1 單頁面前端實(shí)現(xiàn)
在app/web/page 目錄下面創(chuàng)建app目錄, app.vue, app.js 文件.
- app.vue 編寫界面邏輯, 根元素為layout(自定義組件, 全局注冊, 統(tǒng)一的html, meta, header, body)
<template>
<app-layout>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</app-layout>
</template>
<style lang="sass">
</style>
<script type="text/babel">
export default {
computed: {
},
mounted(){
}
}
</script>
- app.js 頁面調(diào)用入口
import { sync } from 'vuex-router-sync';
import store from 'store/app';
import router from 'component/app/router';
import app from './app.vue';
import App from 'app';
import Layout from 'component/layout/app';
App.component(Layout.name, Layout);
sync(store, router);
export default App.init({
base: '/app',
...app,
router,
store
});
5.3.2 單頁面后端實(shí)現(xiàn)
- 創(chuàng)建controller文件app.js
exports.index = function* (ctx) {
yield ctx.render('app/app.js', { url: this.url.replace(/\/app/, '') });
};
- 添加路由配置
app.get('/app(/.+)?', app.controller.app.app.index);
6. 項(xiàng)目部署
- 正式環(huán)境部署菇怀，請?jiān)O(shè)置
EGG_SERVER_ENV=prod環(huán)境變量, 更多請見運(yùn)行環(huán)境 - 構(gòu)建的
app/view目錄,public目錄以及buildConfig.json和manifest.json等文件, 都是gitignore的，部署時請注意把這些文件打包進(jìn)去晌块。
7. 項(xiàng)目和插件
- egg-vue-webpack-boilerplate基于easywebpack-vue和egg-view-vue(ssr)插件的工程骨架項(xiàng)目
- easywebpack Webpack 構(gòu)建工程化.
- easywebpack-cli Webpack 構(gòu)建工程化腳手架.
- egg-view-vue vue ssr engine.
- egg-view-vue-ssr vue ssr 解決方案.
- egg-webpack 本地開發(fā)熱更新使用.
- egg-webpack-vue 本地開發(fā)渲染內(nèi)存讀取輔助插件
