1.代码打包

当我们完成一个项目开发的时候，下一步肯定会要把这个项目放到互联网上进行发布，此时我们就得先通过打包命令npm run build来对项目进行打包。

在命令行工具中运行（需进入项目路径）：

npm run build

稍等片刻后如果提示如下信息则表示打包成功：

打包成功后会在当前项目目录下多出一个dist目录：

在打包之前一定要将之前开发过程中使用反向代理的操作给去除掉，一上线代理就失效了。同时需要注意解决数据接口的跨域请求问题。

注意：打包之后得到的这些文件都是经过压缩处理的，如果需要更改原先JavaScript、css等文件的内容，请在开发环境中去修改，然后重新打包生成。

2.上线部署

项目上线部署需要有服务器，此处我们以已经购买好的阿里云ECS（CentOS 7.9版本操作系统）为例。

后续操作会用到不少相对路径，为了保证大家的操作正确，此处统一先切换当前工作路径：

cd /usr/local/src# 该地址是已经存在的，不需要自己创建

①如果项目中使用到了mongoDB，则需要先安装mongoDB

下载地址：

可以选择Copy Link随后去服务器中对应的目录执行命令下载：

wget  或curl -O 

也可以直接用今日docs目录下已经下载好的压缩包，使用FileZilla进行上传到服务器的/usr/local/src目录。

.tgz格式文件是压缩包文件格式的一种，需要使用其中的内容得先解压，解压命令为：

tar -zxvf mongodb-linux-x86_64-rhel70-4.4.1.tgz# 或tar -xvf mongodb-linux-x86_64-rhel70-4.4.1.tgz# -z：表示指定解压缩所使用的方式，表示使用gz格式进行解压# 如果不指定使用什么方式解压，则tar会自己判断

解压后会得到mongoDB的解压目录：

Linux系统下对于第三方软件的安装一般存放在/usr/local下，此处建议将解压后得到的目录中的bin目录进行转移，转移的同时需要创建mongoDB的数据文件夹和日志文件夹，命令如下：

mkdir -p /usr/local/mongodb/datamkdir /usr/local/mongodb/logcp -r /usr/local/src/mongodb-linux-x86_64-rhel70-4.4.1/bin /usr/local/mongodb/# 建立mongodb需要使用的日志文件touch /usr/local/mongodb/log/logfile

上述指令执行完毕后可以通过ls进行列出检查，查看是否有以下文档结构：

ls /usr/local/mongodb/

随后，就可以通过以下命令去启动mongoDB了：

需要注意，此种方式的mongoDB为绿色软件，默认不会开机自动启动，不再需要使用的时候直接删除/usr/local/mongodb目录即可卸载软件。

/usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/log/logfile --bind_ip=127.0.0.1 --fork# --dbpath：指定数据库文件夹位置# --logpath：指定日志文件位置# --bind_ip：绑定监听的网卡ip地址# --fork：以后台服务的形式运行

注意：logpath配置项的值一定是一个文件（可以不存在），不能是文件夹。

至此，mongoDB已经可以使用了，可以通过运行mongoDB连接工具进行测试，如果有以下输出则一切正常：

此时可以在其中创建好maizuo数据库，以及往库中写入users表中的数据了。

②安装nodejs

文档地址：

复制好对应的指令后在终端中去执行（这个命令会在我们服务器上安装一个nodejs的镜像源以告诉包管理工具去哪里下载nodejs）：

curl -sL  | bash -

随后运行以下命令安装nodejs：

sudo yum install -y nodejs

使用sudo开头的命令可能会提示让输入密码，如果有则输入当前用户的密码即可。

安装好nodejs后，可以通过命令测试是否安装成功nodejs：

node -v

最后，可以继续安装一些可选的全局包以方便后面使用：

# 安装nrm，并切换npm镜像源为淘宝npm i -g nrmnrm use taobao# 安装nodemonnpm i -g nodemon# 安装pm2（让node在后端运行的工具，这样可以在配置完毕之后关闭终端窗口）npm i -g pm2

到此，nodejs环境安装完毕！

③安装nginx

Nginx是一款轻量级服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

软件官网：

傻瓜式包管理工具安装方式说明参考地址：

按照上述提示，在服务器上指定的位置/etc/yum.repos.d/nginx.repo新建一个文件，文件内容如下：

[nginx-stable]name=nginx stable repobaseurl=[nginx-mainline]name=nginx mainline repobaseurl=

对于文件的创建和修改，可以考虑咋windows上进行，写完毕之后再通过文件传输工具，将文件上传到指定的位置即可。

随后运行nginx的安装命令：

sudo yum install -y nginx

在nginx完成安装后，可以通过以下几个命令来管理nginx服务：

# 启动nginxsystemctl start nginx# 停止nginxsystemctl stop nginx# 重启nginxsystemctl restart nginx# 设置nginx开机自启动systemctl enable nginx# 设置nginx开机不自启动systemctl disable nginx

接下来启动nginx：

systemctl start nginx

请注意，后续每次修改了nginx的配置文件都需要对nginx服务进行重启，否则新的配置不会生效。

nginx相关的目录位置：

配置文件主配置文件nginx.conf：/etc/nginx/nginx.conf从配置文件‘*.conf’：可以是任意位置，以主配置文件声明为准，比较常用针对站点的从配置文件在/etc/nginx/conf.d/目录下默认站点目录/usr/share/nginx/html（等于PHPstudy中的WWW目录，回头代码得放到这个里面去）

④域名解析（如果有域名的话）

如果是大陆服务器使用，则域名一定要通过了ICP备案才可以

以阿里云为例，先进入域名控制台，在需要使用的域名后面点击解析按钮进入解析页面，随后点击添加记录按钮并按照自身需求填写解析信息：

设置完成后一般1分钟内即可生效，可以在本机windows上通过ping命令进行测试：

# 以刚才设置的域名为例（请替换成自己的域名）ping sh2008.lynnn.cn

⑤项目代码部署

a. 将打包好的vue代码上传到Nginx默认的站点下，目录地址为/usr/share/nginx/html

b. 启动node服务端为项目提供数据访问服务

如果出现无法访问的情况，请注意防火墙与云安全组的设置。

上传node服务端的代码到远程服务器，位置可以随意（因为代码是node运行的，不是nginx）：

接下来进入node代码的目录/usr/local/src/http，运行安装所需模块的指令：

npm install

此时即便运行了node服务器，也会出现无法访问的情况，需进入阿里云的控制台添加允许3000端口通过。

最后，让node在后台执行http.js文件（根据需要换成自己的文件名），此处需要用到前面安装的pm2工具：

# 先进入项目目录pm2 start http.js## 重启pm2 restart http.js## 停止pm2 stop http.js

如果成功，则会看到如下效果：

c. 解决nginx下，路由模式history失效的问题

方案1：不使用history模式的路由

不使用istory模式，则得用hash模式，该模式下地址栏会有#

方案2：配置nginx，让nginx支持history模式的路由

try_files $uri $uri/ /index.html;

将上述的代码放到/etc/nginx/conf.d/default.conf中

location / {    root   /usr/share/nginx/html;    index  index.html index.htm;    # 以下是新增的一行    try_files $uri $uri/ /index.html;}

随后重启nginx：

systemctl restart nginx

重启之后新的配置将会生效，项目到这里也就可以通过域名或者ip地址进行访问了。