Vue+Node+MongoDB从开发到正式部署

最新推荐文章于 2025-06-20 22:12:39 发布

原创

最新推荐文章于 2025-06-20 22:12:39 发布 · 3.8w 阅读

95 ·

CC 4.0 BY-SA版权

文章标签：

#mongodb #express #node #vue

本文记录了使用Vue、Node和MongoDB搭建项目，从开发到部署的完整过程。首先介绍了前后端分离的开发模式，前端通过Vue-Router和Vue-Resource处理路由和API调用，后端用Node和Express编写API。在开发阶段，Vue-Cli的proxyTable解决跨域问题。然后以登录功能为例，详细讲解了从安装依赖到数据库配置、API编写，最后前端通过webpack打包，后端部署静态文件，完成项目上线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想搭建一个Vue+Node+MongoDB的项目，能跑通整个开发到部署的流程，折腾一个多星期终于可以了~看过不少教学文章，发现教你怎样搭建一个Vue开发环境的很多，搭建Express的很多，但还真没发现一个完整从开发到正式部署的教程，所以只好自己来填这个坑。Node是现学现卖，文中有误请大力指正。其中各种我参考过有用的资源会穿插在文中。

一：整理从开发到部署的思路

首先我们要整理好整个工作流程：
1. 前后端分离，各自开发。这里前后端分离是这样的：前端用Vue开发静态页面，路由通过Vue-Router进行，后端用Node仅用于编写API给前端调用获取数据。
2. 前端开发时通过Vue-Cli中提供的proxyTable进行代理，由此可跨域调用Node编写的API。
3. 前后端各自开发完成，测试无误后，前端通过webpack打包压缩，后端拉取前端打包压缩好的文件即部署完成。

二：以登录功能为例跑一遍这个过程

这里会以一个不完善的登录功能来演示这个过程。
这里写图片描述

功能很简单，填写完账号密码点击登录按钮，就把账号密码插入数据库，并且查出现在已经有哪些数据。

用到的东西：

Vue-Cli
Vue-Resource
Node + Express
MongoDB

下面正式开始：”

安装Vue-Cli
npm i -g vue-cli
去到你想要放置项目的目录，进行初始化
vue init webpack XXX（你想要项目的名字）
按提示一直下一步，完成后按提示
cd XXX
npm install （这里建议使用淘宝镜像cnpm，不然墙外的东西……）
npm run dev
如无意外你就会看到下图，证明成功了
、
这时我们就可以去开发我们的登录页面了。开发过程就不说了，样式怎样也无关紧要，这里只需要两个input框用于填写账号跟密码，还有一个登录按钮负责请求后端接口而已。记得安装一下Vue-Resource。核心代码：

<template>
<input class="form-control" id="inputEmail3" placeholder="请输入账号" v-model="account">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" v-model="password">
<button type="submit" class="btn btn-default" @click=