vue-cli + koa2 生成自动koa2驱动vue的前端项目，koa2作为中间层，vue作为前端渲染，开发环境和生产环境搭建

网上找了很多资料，都没有实现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/'),

最终项目结构如下：

为了更好的维护项目，请喜欢这个项目的朋友在github里面给个星吧，有什么问题也可以留言或者直接在git上提意见