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

更新于 2018-06-27  约 3 分钟
利用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构建出来的生产环境代码。

具体查看源码

阅读 3.3k更新于 2018-06-27

推荐阅读
console.log
用户专栏

只会console.log

7 人关注
12 篇文章
专栏主页
目录