vue 项目实现开发中的前后端连载

vue 项目实现开发中的前后端连载

  前后端分离的开发环境，需要开发一个新的项目时，确定好需求，前端。后端人员就开始自己的工作，前端人员自己模拟数据，在前后端联调时将不合适的地方进行修改，直至联调结束，项目发布上线。
  目前使用的前端框架，以数据驱动为主，简单的开发可以将数据写在源码中，如vue中的data中写入假数据，也可以使用一些mock方案进行假数据的模拟。也可以使用nodejs自己搭建一个Web服务器，本篇主要介绍一下怎么在一个项目中实现前后端连载（nodejs + vue）。
  首先搭建一个vue项目（脚手架版本问为3.11.0）

然后运行项目，使用脚手架搭建项目后，使用npm run serve 启动项目，项目的默认结构为：

  然后在根目录里新建一个node项目文件夹，取名叫nodeapi，然后新建node项目。

  输入yes后，回车。此时会在nodeapi目录中新建一个package.json文件，然后使用npm install 或者 yarn install，安装依赖。
  然后安装 express，如果你想不想每次修改node中的文件，都要重启服务，可以安装一个插件 npm install nodemon .到这一步，node服务就基本搭建完成了，可以简单的测试一下是否能够正常的请求

const express = require("express");
const app = express();

const port = process.env.PORT || 521;

app.get("/", (req, res) => {
  res.send("娃哈哈!~~~`!");
});
app.listen(port, () => {
  console.log(`success for nodeforweb servers! server running on port ${port}`);
});

  OK，没有问题，下面开始实现前后端连载！
  现在来看一下整体的项目结构

  然后在根目录下的package.json中进行启动脚本的配置，在此之前需要安装一个依赖 npm install concurrently,前面我们使用 npm run server 来启动node，在此不做变化。然后在根目录下的package.json文件中添加如下内容：

  "client": "npm run server --prefix nodeapi",其中client是为了连载起的脚本命令的名称，npm run server是node项目的启动脚本。--prefix nodeapi 指向执行此命令脚本时的文件夹。start 是连载时的启动脚本命令，执行 npm start 会同时启动vue项目和node项目。

  到此，就可以验证效果了

   前后端连载在网络上实现的方法，稍加搜索就会有很多，基本上都是千篇一律的，将需要连载的项目命名为client。本着实验的想法，进行了新的尝试，在后端项目中嵌入前端项目，在前端项目中嵌入后端项目，都可以实现连载，本质上并没有多大的区别。
   实现的核心思想，就是配置各个项目的启动脚本名称，然后使用 concurrently 插件进行连载的操作。
   以上就是前后端实现连载的一个简单例子，当然并不是每个项目都需要连载，要根据实际需要而定。
Tips:
   如果本文章对您有帮助，欢迎评论告知！