网上找了很多资料，都没有实现vue-cli + koa2渲染的实现方式，即使有部分教程，讲得也不是很彻底，我总结了部分教程并且用webpack生成一个基于vue-cli、在koa2层上渲染的DEMO，希望给大家一些帮助。
git地址：https://github.com/seizeDev/vue-koa2，有问题可以讨论
做之前我给这个demo的要求是：
1、基于vue-cli
2、koa2负责渲染vue页面和作为中间层来处理java端传过来的数据
3、koa2分层合理并且易于拓展
4、生产环境也是用koa2作为反向代理服务器，并且渲染页面
5、webpack用4.0版本
要求明确之后我们开始第一步
1、下载vue-cli，并且生成基于vue-cli的项目。移步https://www.npmjs.com/package/vue-cli，查看怎么安装并生成vue-cli项目
2、修改my-demo里面的webpack配置，并且重新生成package.json,删除package.json里面的devDependencies
dependencies替换成我git项目里面的。
3、增加相关koa2文件和config配置还有build配置
创建server文件，里面存放的是koa2服务器的相关文件
build文件夹增加devmddleware.js
const
webpackDev =
require(
'webpack-dev-middleware')
const
devMiddleware = (
compiler,
opts)
=> {
const
middleware =
webpackDev(
compiler,
opts)
return
async (
ctx,
next)
=> {
await
middleware(
ctx.
req, {
end
: (
content)
=> {
ctx.
body =
content
},
setHeader
: (
name,
value)
=> {
ctx.
set(
name,
value)
}
},
next)
}
}
module.
exports=
devMiddleware;
增加hotmiddleware.js
const
webpackHot =
require(
'webpack-hot-middleware')
const
PassThrough =
require(
'stream').
PassThrough;
const
hotMiddleware = (
compiler,
opts)
=> {
const
middleware =
webpackHot(
compiler,
opts);
return
async (
ctx,
next)
=> {
let
stream =
new
PassThrough()
ctx.
body =
stream
await
middleware(
ctx.
req, {
write:
stream.
write.
bind(
stream),
writeHead
: (
status,
headers)
=> {
ctx.
status =
status
ctx.
set(
headers)
}
},
next)
}
}
module.
exports =
hotMiddleware;
webpack.dev.conf修改为：
const
merge =
require(
'webpack-merge');
const
baseConfig =
require(
'./webpack.base.conf');
const
webpack =
require(
'webpack');
let
devConfig =
merge(
baseConfig, {
output: {
path:
'/'
},
devServer: {
watch:
true,
inline:
true,
reload:
true,
// clientLogLevel: 'warning',
historyApiFallback:
true,
hot:
true,
proxy: {}
},
devtool:
'#source-map',
plugins: [
new
webpack.
HotModuleReplacementPlugin(),
new
webpack.
NoEmitOnErrorsPlugin()
]
});
module.
exports =
devConfig;
其中devserver没啥用，要不要都行
server文件夹下增加，index.js，作为服务端的入口：
const
Koa =
require(
'koa');
// koa配置
const
Config =
require(
'../config/koa.config');
const
args =
process.
argv.
splice(
2);
console.
log(
args)
const
app =
new
Koa();
//webpack热加载相关
const
webpack =
require(
"webpack");
const
server =
require(
'koa-static');
const
bodyParser =
require(
'koa-bodyparser');
const
webpackConfig =
require(
"../build/webpack.dev.conf");
const
devMiddleware =
require(
"../build/devMiddleware");
const
hotMiddleware =
require(
'../build/hotMiddleware');
const
compiler =
webpack(
webpackConfig);
// 生产打包并且监听
if(
args &&
args[
0] ==
"production"){
Config.
node.
port =
"8280"
app.
use(
server(
__dirname+
"/dist/"));
}
else{
// 开发打包热加载
app.
use(
devMiddleware(
compiler));
app.
use(
hotMiddleware(
compiler));
}
const
onerror =
require(
'koa-onerror');
// koa错误打印
const
information =
require(
'./information')
// app.use(index);
information(
app)
// 路由
const
indexRouter =
require(
'./routers/indexRouter')
// app.use(index);
indexRouter(
app)
app.
use(
bodyParser());
//错误信息处理
onerror(
app);
//控制台打印请求信息
app.
use(
async(
ctx,
next)
=> {
const
start =
Date.
now();
await
next();
const
ms =
Date.
now() -
start;
console.
log(
`
${
ctx.
method
}
${
ctx.
url
}
-
${
ms
}
ms`);
});
app.
listen(
Config.
node.
port,()
=> {
console.
log(
'正在监听'+
Config.
node.
port)
});
config文件夹下增加koa.config.js
module.
exports = {
node: {
port:
3011
}
}
package.js里面的启动器修改为：
"scripts": {
"start":
"node ./server/index.js development",
"production":
"node ./server/index.js production",
"lint":
"eslint --ext .js,.vue src test/unit test/e2e/specs",
"build":
"node build/build.js && npm run production"
},
config index.js下的build对象里面的assetroot 改为：
assetsRoot:
path.
resolve(
__dirname,
'../server/dist/'),
最终项目结构如下：
