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

最新推荐文章于 2023-02-01 18:34:23 发布

cxn304

最新推荐文章于 2023-02-01 18:34:23 发布

阅读量459

点赞数

分类专栏：后端前端文章标签： vue.js node.js

本文链接：https://blog.youkuaiyun.com/cxn304/article/details/103578738

版权

后端同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

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}`);
});