項目背景
這個是我個人博客下一步開發的流程，上一篇博客講過，我會研究eggjs後端框架，給我的博客建立後端系統。
這裏有人會說前端不需要學後端。
怎麼說呢，nodejs也是js，並且像阿里等大公司，別人雖然也用nginx之類，但是前端項目已經不是放在nginx上面跑了，所以，前端開發需要熟悉在nodejs環境下運行和開發。
項目已經上傳
git地址：https://github.com/ht-sauce/dream-backend
調研
仔細看了下eggjs官方的關於和vue項目的結合
這裏先奉上地址：https://www.yuque.com/easy-team/egg-vue/case
egg官方分爲三種渲染模式
服務端渲染（ssr）
說白了就是把vue當成視圖模板去開發，和傳統不同的在於是完全由前端控制，核心的路由是nodejs控制。這是和Nuxt.js通過vuerouter進行控制不一樣。eggjs更多是變成了傳統的mvc框架模式。前端變成了之前的view部分。
前端渲染
這個和nginx沒啥太大差別，但是主要是eggjs官方自己將vue的開發環境和eggjs結合在一起了，不存在啓動兩個項目的情況
assets前端渲染
這裏我直接抄官方說法，說實在下面兩點我沒太理解。
在 前端渲染模式 章節講到了基於 Vue 的一體化的前端渲染模式，好處是不需要藉助第三方模板引擎且無效關注靜態資源注入問題，但有兩個小的功能限制：
-
layout 模板數據綁定能力較弱
-
資源注入不能自己定義，比如 async， crossorigin 等配置
個人選擇
1、我個人而言項目之前是用的vuecli開發的，讓我再把項目重構放在eggjs中，不樂意。
2、如果從前端渲染角度去考慮，我覺得完全沒必要把項目進行合併，也降低了項目複雜度，缺點就是項目變多。
3、服務端渲染肯定是後期要做的。只不過先嚐試。下次我會單獨說一下服務端渲染。
實戰
廢話太多，最終我選擇了前端渲染。選擇和之前nginx類似的操作模式，不同在於我這次的vue項目是多頁面項目。
vue的多頁面項目從實際角度來看，其實和以前的靜態文件模式差不多，但是多頁面的優點在於資源共享。
1、打包
注意一點，你到時候項目放在哪裏，也就是你的資源文件訪問是否存在前綴。
我這裏eggjs靜態資源都在public下面所以，
vue.config.js是這樣的：
//獲取命令行參數
const projectName = process.argv[3];
console.log("當前打包項目名稱：" + projectName);
//頁面配置參數，注意項目名稱保持一致，頁面結構保持一致
const multiPageConfig = {
//index是特殊的項目，不做多餘操作，僅僅用於項目分發
//舉例，如判斷電腦端和移動端，做首頁項目入口
index: {
name: "海天醬油"
},
dht_blog: {
name: "海天醬油博客"
},
dht_platform: {
name: "海天醬油後臺系統"
}
};
//生成統一的頁面配置結構
const multiPage = function() {
let page = {};
for (let item in multiPageConfig) {
page[item] = {
entry: `src/${item}/main.js`,
template: `src/${item}/index.html`,
filename: `${item}.html`,
title: multiPageConfig[item].name,
favicon: `src/${item}/assets/${item}.ico`
};
}
return page;
};
const page = multiPage();
//vue下配置文件參數
const vueConfig = {
//注意，這裏的public就是對於eggjs下的靜態資源
publicPath: process.env.NODE_ENV === "production" ? "/public" : "/", //部署應用包時的基本 URL
outputDir: "dist", //打包目錄
pages: projectName ? page[projectName] : page
};
console.log(page);
module.exports = vueConfig;
打包之後直接放在eggjs下的app/public下
然後關鍵的路由配置就像nginx一樣
這裏注意，我開發的時候自己本身項目是區分了前綴的，但是eggjs的路由需要注意是在public下的，所以你需要增加public前綴，但是vue的router.js是不需要的
vue:router.js
eggjs:router.js
注意訪問下面兩個路由的代碼是沒錯的，但是在訪問的時候
應該分別是：/public/dht_blog/index
/public/dht_platform/home
原因在於我的項目在多頁面的時候進行的首頁重定向
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.get('/public/dht_blog/*', controller.home.dhtBlog);
router.get('/public/dht_platform/*', controller.home.dhtPlatform);
};
接下來是eggjs的控制部分也就是mvc中的C（controller） ，直接讀取靜態文件發送給前端
'use strict';
const path = require('path');
const fs = require('fs');
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
// 純靜態資源方式和eggjs結合，eggjs提供靜態資源功能並且提供代理轉發
// 注意當多頁面項目情況下需要配置多個前綴路由
const { ctx } = this;
ctx.response.type = 'html';
ctx.body = fs.readFileSync(path.resolve(__dirname, '../public/index.html'));
}
async dhtBlog() {
const { ctx } = this;
ctx.response.type = 'html';
ctx.body = fs.readFileSync(path.resolve(__dirname, '../public/dht_blog.html'));
}
async dhtPlatform() {
const { ctx } = this;
ctx.response.type = 'html';
ctx.body = fs.readFileSync(path.resolve(__dirname, '../public/dht_platform.html'));
}
}
module.exports = HomeController;
接下來就是頁面訪問了
