Vue+Express实现前后端分离以及通过node.js的热更新

Vue+Express实现前后端分离

原理：

前端打包

vue-cli用的是webpack打包，运行npm run build打包命令会在根目录下生成一个dist文件夹，这个文件夹中包含前端的img,css,js文件。

后端在express中提供静态资源

后端主入口为./start.js
这里给出我的代码，这个文件放到根目录

const path = require('path');
const express = require('express');
var fs = require('fs'); //文件模块


const PORT = process.env.PORT || 5000;	// 端口
const config = require('./config');


let app = express();

app.use(express.static(path.join(__dirname, 'dist'))); // dist文件夹下面的网页,作为静态资源，直接加载
app.use(express.json({
    limit: '200mb'
}));

//如果404，则重定向
app.get('*', function (req, res) {
    res.sendfile('./dist/index.html');
});


app.use((err, req, res, next) => {	// 显示错误信息
    console.error(err);
    res.status(err.statusCode).json(err);
});

app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}`);
});

使用Vue开发前端页面，实际上后端express在对路由做处理的时候，只会返回一个页面，即前端打包生成后的index.html文件。这样就可以对其进行单文件处理了，其他后端加url的可以由express解决，express只需要把index.html输送到前端即可。

有一个可以实现express的5000端口依赖8080端口热更新的办法，就是进入dist文件夹后把index的<script src=http://localhost:8080/index.js> </script>加上

node.js的热更新

webpack在dev模式中是把热更新的文件存入内存的，现在参考这篇文章

https://www.imooc.com/article/details/id/21713
https://www.jb51.net/article/143904.htm

Vue+Express+Mysql 全栈

https://segmentfault.com/a/1190000019294514
https://www.jianshu.com/p/2d5af4932994

webpack内存读取技术调研

https://www.cnblogs.com/zhangmingzhao/p/10045290.html
https://www.h3399.cn/201812/638618.html

利用码云的GiteePages搭建图床

https://blog.csdn.net/lookinthefog/article/details/93861977