【超详细小白教学】Vue+nodejs电商项目部署指南

最新推荐文章于 2024-06-09 22:47:40 发布
置顶 最新推荐文章于 2024-06-09 22:47:40 发布
阅读量6.3k 收藏 159
点赞数 64
分类专栏： Vue 系列 文章标签： ssh vue nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43786756/article/details/112982951
版权

【超详细小白教学】Vue电商项目部署指南

前言

🚩在线体验地址
体验账号：admin 密码：123456 已经默认设置啦，可以直接登录。

食用指南：推荐照着我的设置来走。

在最前面，厚着老脸，跟大家要一个star。各位看官老爷们希望能给我的Github一个star~~~为了整理这个纯小白部署上线教程，我又重新购买了一个服务器，从头弄了一遍，看在这个份上可怜可怜小人把呜呜呜呜。

🐱 本项目Github源码

项目从0到1博客指南：
2021 Vue全家桶开发电商管理系统（Element-UI）01-项目初始化
2021 Vue全家桶开发电商管理系统（Element-UI）02-配置API接口服务器并调试接口
2021 Vue全家桶开发电商管理系统（Element-UI）03-实现登录退出功能
2021 Vue全家桶开发电商管理系统（Element-UI）04- 系统主页和用户列表功能
2021 Vue全家桶开发电商管理系统（Element-UI）05 - 用户权限管理的实现
2021 Vue全家桶开发电商管理系统（Element-UI）06 商品分类
2021 Vue全家桶开发电商管理系统（Element-UI）07 参数管理
2021 Vue全家桶开发电商管理系统（Element-UI）08 商品列表功能的实现
2021 Vue全家桶开发电商管理系统（Element-UI）09 数据报表功能
2021 Vue全家桶开发电商管理系统（Element-UI）10-项目优化上线
【超详细小白教学】Vue+nodejs电商项目部署指南

1 准备工作

1.1 云服务器购买

进入阿里云官网 找到上边导航栏的产品→云服务器ECS

image-20210122124410391

随后点击立即购买

image-20210122124438550

进入购买页面后，按照我的选择进行选择就好啦

image-20210122124552724

在实例中，选择当前带，筛选“1vCPU"image-20210122124626556

然后选择这个最便宜的17.1的就好啦，够用。其他默认

image-20210122124738237

接下来选择镜像 公共镜像Alibaba 2.1903。

image-20210122124815077

接下来是选择存储和购买时长。存储的话，购买最低配20就够用了，购买时长，初学者推荐先购买一个月或一周的。弄好了可以再续。

image-20210122125003315

弄好之后点击下一步网络和安全组。网络默认。

带宽计费模式这里我是选择了按使用流量，峰值设为4。（说到底还是为了节省，按固定带宽太贵了23元呢！按流量0.8/GB，再怎么花也不超过5块钱。）

关于带宽计费模式两者的购买意见：
服务器使用频繁：按固定
不频繁：使用流量

因为针对我们初学者来说，使用服务器最频繁的时候就是部署上线的时候，其他时候几乎没啥请求。所以按流量足以。

image-20210122125152381

然后是选择安全组

image-20210122125550002

选择一个安全组，然后按选择就好了。如果你这里没有安全组，先关掉这个模态框，在安全组那一行选择新建安全组。

image-20210122125630596

image-20210122125714066

跳转至创建安全组页面，所有都默认就好了，直接创建。

image-20210122125757879

选择完安全组之后，按下一步系统配置

image-20210122125900085

在这里选择自定义密码

记住这个账号密码，是后面ssh登录要用的。其它默认，直接下一步：分组设置

image-20210122130007997

这里啥也不用填，直接下一步确认订单

image-20210122130108040

打钩服务协议那一行，确认下单，付钱，就完事了。

image-20210122130144359

1.2 代码准备

前端代码准备

打开main-prod.js(如果你没有区分开发文件和发布文件的话，那就打开main.js)，修改配置请求根路径如下图所示。其中118.31.171.210修改成你的服务器公网ip，端口号改成你的接口所用的端口，在此处我是用8801。可以跟着我写

axios.defaults.baseURL = "http://118.31.171.210:8801/api/private/v1/"

image-20210121204232140

此外，还需要进入到Add.vue中进行修改

image-20210121201838717

将uploadurl中的ip地址和端口号改成上面用的。

image-20210121204346254

接下来进行npm run build，生成打包的dist文件。

image-20210121202132997

别着急，还没结束，打开dist文件夹中的index.html

image-20210121202321412

自动生成的html代码里面的路径可能是错误的，我们需要将每一行/改成以下形式./

错误路径：

  <link href="/css/cate_params.fed87b68.css" rel="prefetch">

image-20210121202409668

正确路径：

  <link href="./css/cate_params.fed87b68.css" rel="prefetch">

image-20210121202649707

至此，我们的前端代码准备就绪。我们只需要上传dist文件夹，为了方便，我们创建一个"部署"文件夹，将dist文件夹拷贝进去。

image-20210121202934658

后端代码准备

后端代码为vueShop-api-server，建议将里面包含的node_modules文件夹直接删除（下方截图已删除node_modules文件夹），因为在Linux中还需要进行依赖包下载。

image-20210121203039412

在后端代码中，我们一共需要改2处。

1.修改config/default.json文件中的baseURL、user、password，如下图所示。

​ baseURL：仅修改接口端口号，其他勿动。

​ user：数据库用户名。

​ password：数据库密码。

​ 记住user和password！！！后面有用。

image-20210121203348910

2.打开app.js，将listen端口号修改成你的接口端口号。

image-20210121203651871

将vueShop-api-server文件夹拷贝至“部署”文件夹中。

image-20210121203840935

至此，我们的代码准备工作完成。

2 部署上线

2.1 安装并登录宝塔系统

打开命令提示符cmd，输入以下命令，然后输入密码，就进来到Linux系统啦。

 ssh root@你的服务器公网ip

image-20210121204939694

接下来我们需要下载宝塔工具。

安装命令：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

当出现…?选择y就好啦，然后等待下载完成。

image-20210121205227995

安装完成后，我们可以看到外网网址以及用户名、密码。复制外网网址，到浏览器中打开，不要关闭此窗口。

image-20210121205614603

如果刚安装好面板，但是没有把系统初始的用户名和密码记下来，可以进入ssh然后输入命令如下：bt default

此时无法访问外网地址。为什么呢？因为在阿里云那里我们没有放行面板8888端口。接下来打开阿里云。

image-20210121205903850

在左侧栏中选择"云服务器ECS"，打开。

image-20210121210051290

再次从左边中选择“实例”，点击蓝字进入实例详情

image-20210121210220481

image-20210121210252729

在实例详情中点击“安全组”，并再次点击蓝字进入安全组管理

image-20210121210416549

选择“入方向”并点击“手动添加”

image-20210121210543009

填写优先级默认1，协议类型默认自定义TCP，端口号8888，授权对象均为0.0.0.0/0，点击保存。

image-20210121210741283

为了避免后期反复返回阿里云增加端口号，我们一次性添加完，按照以下示意图进行添加，一共开放12个端口，自己检查一下对不对。注意我们的端口号全部是在入方向添加，出方向不用管，出方向默认全部放行

有些人会默认产生80、3389端口，有些人不会，自行添加就好。

image-20210121211226451

端口说明：

3306:mysql默认端口
80:我自己开放的访问我的页面的端口
8801:api的端口

其他接口为宝塔的一些接口和阿里云默认接口，建议直接按照我的照抄

此时我们在重新刷新页面，就显示宝塔页面了，还记得在cmd中看到的账号密码吗？输入账号密码进入宝塔系统。

image-20210121211555699

进入之后需要绑定宝塔账号，自己去注册就好了，这个就不用多说。

image-20210121211716561

接下来他会跳出推荐安装页面，不用管，直接关掉。

image-20210121211822241

进入系统后，我们去安装东西，点击左边栏的“软件商店”

image-20210121212014968

安装一下三个软件，均使用极速安装：Nginx 1.18 、MySQL5.5、Tomcat7

image-20210121212105674

image-20210121212128837

image-20210121212212932

image-20210121212249156

在安装的过程中，我们去配置一下端口。在防火墙下方填写端口、及说明点击添加放行端口。

注意，此处选择默认的放行端口，别选错了

一共12个端口，自己数数对不对

image-20210121231154245

image-20210121231208159

以上操作完毕后，我们进入下一步：上传代码并配置

2.2 上传代码

选择左侧“文件”，找到tomcat->webapps ，将后端代码和前端代码上传到这个位置。

image-20210121225058733

image-20210121225720547

上传完成后，在webapps目录中就可以看到这两个文件啦

image-20210121225613312

2.3 数据库配置

在宝塔系统中选择数据库→root密码，密码改成root，提交。

image-20210122130523141

image-20210122130549751

Linux指令指南：
ls查看当前目录有哪些文件

cd … 返回上一级

cd 文件名 去往哪个文件夹（按tab键可以快速补全）

打开命令提示符cmd，进入Linux系统。

 ssh root@你的服务器公网ip

image-20210122130838002

输入命令mysql -uroot -p，再输入完密码后即可进入终端的操作界面了。密码为宝塔中设置的密码root。

输入命令show databases;可以看到已经存在的数据库

再输入命令

create database `mydb` default character set utf8 COLLATE utf8_general_ci

注意：mydb肩膀上要有符号`

image-20210122123222892

通过命令show databases;就可以看到新的数据库已经创建成功了

image-20210122131550079

接下来就是将.sql文件放入该数据库中了。首先退出数据库exit;然后进入mydb.sql文件所在的目录中，我的是/www/server/tomcat/webapps/vueShop-api-server/db，之后是在该目录下进入数据库，即mysql -uroot -p 进入刚才创建的数据库mydb中use mydb，使用命令show tables;可以看到此时数据库中没有任何的表；我们使用命令source /www/server/tomcat/webapps/vueShop-api-server/db/mydb.sql;`即可在该数据库中创建表了。

image-20210122131717926

image-20210122131747039

image-20210122131806434

等待数据和表上传完成再次使用命令show tables;可以看到此时的数据库中出现的表，这就完成了本地数据库上传到服务器上的所有操作了。

image-20210122131930458

接下来回到宝塔系统，选择左边栏的数据库，再在显示页面中选择从服务器获取，出现mydb数据即表示成功

image-20210122123516667

2.4 启动node服务

首先看看有没有npm

npm -v

image-20210121232209652

此时显示没有，那我们首先要去安装一个nodejs~可以在下面链接自己找版本进行安装，也可以使用我的版本。

nodejs安装包 网站

附上CenOS安装nodejs的一个博客链接

CenOS安装nodejs的4种方法

//进入root目录
cd /root

//下载安装包
wget http://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-x64.tar.gz

image-20210121235055648

等待安装包下载完成~执行以下命令解压

sudo tar --strip-components 1 -xzvf node-v* -C /usr/local

解压完成之后，执行一下代码，查看是否安装成功

node --version

实现v…说明安装成功了

image-20210122001416707

回到api文件夹，并使用npm install 安装依赖包，依赖包安装完成后，执行app.js

//回到api文件夹
cd /www/server/tomcat/webapps/vueShop-api-server

//安装依赖包
npm install

//执行,
node app.js

image-20210122001505722

如果在执行npm install的时候报错，npm WARN deprecated，有可能是你的node版本太低了，去上面的链接找一个距离你当下时间较近的安装包下载

但上面的app.js执行后，一旦关闭cmd窗口，后端接口就失效了，如何让node app的程序一直运行？

解决方法：

首先我们推出app.js执行，按ctrl + c

1.安装forever

//进入local目录
cd /usr/local

//安装
npm install -g forever

image-20210122132708663

2.使用forever开启nodejs程序

cd /www/server/tomcat/webapps/vueShop-api-server

forever start app.js

image-20210122132748105

出现Forever processing file: app.js说明已经成功运行。

2.5 nginx配置并启动

点击软件商店，找到Nginx点击设置

image-20210122001615465

点击配置修改，增加下面代码：

 server{
     listen 80;
     server_name localhost 118.31.171.210;
     location / {
         root /www/server/tomcat/webapps/dist;
         try_files $uri $uri/ /index.html;
     }
 }

其中listen为网页接口，server_name中的Id为你的服务器外网ip，location的root为dist文件夹位置，其他和我一样就好

特别注意！！！这一段代码是加在http中的，不要往下滑！！！不要加到下面的server中。这是我踩过的坑

image-20210122132955011

配置完之后，选择保存。

回到服务，先点击重新配置，在点击重启

image-20210122133246250

如果此时运行失败，出现：bind() to 0.0.0.0:80 failed (98:Adress already in use)错误，是由于端口号被占用。

解决：

进行cmd命令行

//查看端口
netstat -ntlp

image-20210122004905072

找到80的Pid

//杀掉进程
kill 19016

image-20210122005009466

重新查看

netstat -ntlp

image-20210122005041540

解决。

在宝塔中重新点击重启即可。

如果成功的话，浏览器访问就能进入你的项目啦：（http://服务器的IP:80）

image-20210122133757733

image-20210122123625369

到此，我们的项目就成功部署上线啦有任何问题，都可以在评论区说出来~，你遇到的问题我基本都遇到过，因为踩了太多坑了呜呜呜。

总结

整理不易，若对您有帮助，请点个赞，给个star，您的支持是我更新的动力 👇

📖本项目开发全过程博客记录

🐱 GitHub笔记

🐱 本项目Github源码

各位看官老爷们希望能给我的Github一个star~~~为了整理这个纯小白部署上线教程，我又重新购买了一个服务器，从头弄了一遍，看在这个份上可怜可怜小人把呜呜呜呜。

一只蒻蒻
关注
  • 64
    点赞
  • 踩
  • 159
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
前后端分离对前端意味着什么？
m0_57290404的博客
01-04 590
定义：前后端分离首先是一种架构模式，其次是一种解耦策略，最后，才是为了降低项目研发周期，而采取的前后端人员分离(为了并行开发以及职能分离)。在前后端彻底分离这一时期，前端的范围被扩展，controller层也被认为属于前端的一部分。在这一时期：前端：负责View和Controller层。后端：只负责Model层，业务/数据处理等。
Vue+NodeJS前后端分离项目Docker部署1
08-04
1. 整体架构图 2. 环境描述 3. 部署效果 1. 源码获取 4. 创建相关目录与文件 5. 创建docker网络用于容器互联 1. 创建并启动容器 2.
Vue商城项目、练手项目、基于Vue+Node.js+TypeScript实现的商城项目
qq_39851888的博客
08-29 5640
前言： 作为Vue的初学者，经常会苦恼于没有项目练手，曾经的我也是这样子的，因此想开发一个项目提供给前端初学者。这个项目难度适中，适合初学者去开发和参考，本项目提供了现成的前后端源码、接口文档及设计图，大家可以参考设计图去实现一个商场项目，根据接口文档去对接接口，如果中间有任何问题的也欢迎加微信或QQ咨询。觉得还不错的点个Star哦~ 丑小喵商城说明文档 项目地址 预览地址：https://mall.cxmmao.com/#/ 接口文档：https://mall.cxmmao.com/cat-mall-ap
基于NodeJs 的Vue安装和创建项目
最新发布
加州暖阳的博客
06-09 932
基于NodeJs 的Vue安装和创建项目。
vue+nodejs 搭建网站全过程
一步一个脚印，踏实努力，向着目标前进
06-02 2041
Vue.js + Node.js + MongoDB 的网站搭建示例。进入后端目录，使用 Node.js 搭建后端服务器，编写接口，连接数据库等。可以进行前端和后端的性能优化，包括页面优化、服务器优化等。进入前端目录，使用 Vue.js 编写前端代码，包括页面设计、组件编写等。使用 PM2 等工具将项目部署到服务器上，可以使用 Nginx 等工具进行反向代理和负载均衡。Node.js：用于搭建后端服务器。Express：用于简化后端开发。Vue.js：用于创建用户界面。
nodejs及vue的安装与配置~小白教程！
qq_59534189的博客
06-22 9162
此时有很大机率会出现权限问题，所以我们要么以管理员身份运行 cmd 窗口，在该窗口下切换路径，要么设置存放项目的文件夹属性。最好在其它盘里建一个文件夹来存放所创建的 vue 项目，由于小编只有一个C盘，所以我直接在 nodejs 文件下创建了一个 Data 文件夹来存放我创建的项目。：在设置环境变量后，一定要点击“确定”，每个对话框都要点“确定”才可设置成功！vue_test 项目创建成功！此时 node_modules文件夹还未生成，但是等我们把模块安装到全局目录下面时，系统会自动生成该文件夹。
Vue 组件基础
JmuziA的博客
12-17 326
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intellisense —— 自动路劲补全 HTML CS...
vue+nodejs+mysql上线部署（服务器CentOS8）
yfy538的博客
09-13 2391
vue+nodejs+mysql上线部署
基于Node+Vue+Express开发实现商城系统
软件开发实战项目分享
10-13 2601
本项目基于Node+Vue+Express框架开发实现了一个商城管理系统，系统用户分为前端普通用户和后台管理用户，均使用前端开发技术开发实现（订单功能未做） 普通用户的主要功能 有： 注册、登录（图形验证码） 定位 （腾讯地图定位功能）、自主选择所在城市 商品 分类 简单展示商品 查看商品详情 商品评论 分页功能 购物车功能 加入购物车 购物车商品数量增减 清空购物车 商品结算 多关键词模糊搜索商品 （关键词需为商品名称） 用户个人中心 修改用户信息 （头像、昵称、简介...） 修改手机号 修改密码 管
uniApp+vue+nodejs+express+mysql电商项目.zip
10-21
【标题】"uniApp+vue+nodejs+express+mysql电商项目"是一个综合性的Web开发实践，涵盖了前端、后端以及数据库等多个技术栈。在这个项目中，开发者将使用uniApp作为移动端应用框架，Vue.js作为前端框架，Node.js搭配...
基于vue+nodejs的电商后台管理系统
01-28
《基于Vue+Node.js的电商后台管理系统》是一个综合性的IT项目，主要涵盖了前端开发、后端服务构建以及电商平台的相关功能实现。在这个系统中，Vue.js作为前端框架负责用户界面的交互与展示，而Node.js则作为后端开发...
Node.js+Vue+MySQL 新人入门参考项目
06-27
本资源提供的是我自己项目的github地址，在线访问地址http://139.199.203.200:3333，一个Node做后台、前端用Vue、React(react只做了部分示例)，数据库采用MySQL的小项目供新人入门参考，包括vue、node的常用语法，socket即时通信,具体用法等可以到github看看README.md
mall:vue项目(vue全家桶+nodejs) 电商网站
05-11
lp-mall 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
uniApp+vue+nodejs+express+mysql电商项目-uniApp-shop.zip
11-04
下面我们将详细探讨这些技术在电商项目中的应用及其重要性。 首先，uniApp是一个基于H5的多端开发框架，由DCloud（数字天堂）推出。它允许开发者使用Vue.js语法进行跨平台开发，覆盖Android、iOS、小程序、Web等多...
基于Vue+Nodejs+的茶叶售卖平台设计与实现
05-07
《基于Vue+Node.js+MySQL的茶叶售卖平台设计与实现》 在当今互联网时代，电商平台已经成为各类商品销售的重要渠道。本项目旨在构建一个基于Vue.js前端框架和Node.js后端框架的茶叶售卖平台，结合MySQL数据库，实现...
nodejs + vue环境搭建
wangyu233的博客
08-05 1551
nodejs, vue
node.js+vue.js全栈开发学习(零)
lan4_的博客
10-01 375
小白学习全栈开发(零)
Vue开发实例目录总索引
热门推荐
编程界明世隐的博客
12-20 1万+
Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ >即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！
基于NodeJs 的Vue安装和创建项目（简单易懂）
瞭望红尘的博客
08-21 1468
Vue前端框架的环境搭建。
vue+nodejs+mysql项目下载
11-29
要下载Vue Node.js MySQL项目，您需要按照以下步骤进行操作： 1. 首先，确保您已经安装了Node.js和MySQL数据库。如果没有，请前往它们的官方网站并按照说明进行安装。 2. 打开您的命令行终端，创建一个新的项目文件夹。您可以使用以下命令创建一个名为"my-project"的文件夹： ``` mkdir my-project ``` 3. 进入新创建的项目文件夹： ``` cd my-project ``` 4. 使用以下命令初始化一个新的Node.js项目： ``` npm init -y ``` 这将会自动生成一个默认的`package.json`文件。 5. 安装Vue.js。使用以下命令将Vue.js添加到您的项目中： ``` npm install vue ``` 6. 安装Express框架，用于构建服务器端应用。使用以下命令将Express添加到您的项目中： ``` npm install express ``` 7. 安装mysql模块，用于连接和操作MySQL数据库。使用以下命令将mysql模块添加到您的项目中： ``` npm install mysql ``` 8. 创建一个新的JavaScript文件，例如`app.js`，并打开它。 9. 在`app.js`中编写您的服务器端代码，包括Vue.js的前端代码和与MySQL数据库的交互。您可以根据您的项目需求编写自定义的代码。 10. 保存`app.js`文件并返回终端。 11. 在终端中运行以下命令以启动服务器： ``` node app.js ``` 12. 当服务器启动成功后，您将看到一个成功的消息。此时，您可以在浏览器中访问`http://localhost:3000`来查看您的Vue Node.js MySQL项目。 总结一下，下载Vue Node.js MySQL项目的步骤包括：创建项目文件夹，初始化Node.js项目，安装Vue.js、Express和mysql模块，编写服务器端代码，启动服务器并在浏览器中查看项目。这样，您就可以成功下载和运行Vue Node.js MySQL项目了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值