vue部署到eggjs下，并且实现多页面vue项目部署，eggjs前端渲染项目（附个人github示例地址）
项目背景
这个是我个人博客下一步开发的流程，上一篇博客讲过，我会研究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;
接下来就是页面访问了
