Node+Vue+webpack实现前后端单页面

利用node+koa+ejs+mysql+webapck简易的开发实现一套Web单页应用项目。

直接看代码-->GitHub

0、导言

我们知道，使用vue官方推荐的vue-cli脚手架很方便就可以创建一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。而我们这个项目仅是把webpack生成的前端入口当作node服务的一个index.ejs模板，所以只需要修改webpack的配置文件，将webpack的生产环境构建目录修改为index.ejs路径即可。

1、node环境

首先，安装node,具体安装教程请参考http://nodejs.cn/。
然后，我们构建node项目的目录文件：

运行node app打开http://localhost:8000/查看效果。

2、塔建Vue前端项目

首先参考Vue官网提供的vue-cli脚手架vue-cli命令行在目录front中生成我们的前端项项目。

运行npm run dev查看开发环境效果。

然后，找到文件front/config/index.js,修改build构建配置为：

module.exports = {
  build: {
    env: require('./prod.env'),
//  index: path.resolve(__dirname, '../dist/index.html'),
//  assetsRoot: path.resolve(__dirname, '../dist'),
//  assetsSubDirectory: 'static',
    index: path.resolve(__dirname, '../../views/index.ejs'),
    assetsRoot: path.resolve(__dirname, '../../public'),
    assetsSubDirectory: '',

这样，在你vue项目里面运行npm run build的时候，会把vue项目构建成一单页面，路径为views/index.ejs，同时将vue的static静态文件目录修改为node的public目录。

运行npm run bulid构建生产环境，返回node项目查看views的下index.ejs，你会发觉其代码都已经被修改了，并且public目录下多出了css和js文件，这些就是利用vue构建出来的生产环境代码。

具体查看源码