vue如何将项目部署到服务器上并且使外网能够访问到

你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ，通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 index.html 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

Introduce

在开发模式的时候，我们常用 nodemon 和 webpack 热更新nodejs项目（如express）和前端项目（如vue），但需要部署的时候我们就不能再用开发环境的配置了，需要改成生产环境配置。为了使得项目可以稳健的运行在服务端，node可以使用nohup启动，前端项目可以使用nginx代理。

但是为了更加规范管理，我们应该使用pm2来管理node项目。

nohup(不推荐使用)

作用：不挂断地运行命令。

启动后通过 ps -ef 可以查看进程和 pid，如果需要停止，输入

需要特别注意的是，退出远程时，要使用 exit 退出，直接关闭远程工具将会导致后台静默进程停止。

尽管nohup是内置工具，但万一服务抛异常，对外没有反应，表现为无端停止服务，对维护不友好。

pm2(推荐使用)

相比 nohup，pm2 更加合理，推荐使用 pm2 部署。

首先全局安装 pm2

为了方便，我们可以把 pm2 软链接到系统环境下(假设 pm2 安装路径是/usr/sbin/nodejs/bin/pm2)，

最后在项目中添加 pm2 配置文件， processes.json

其中 name 代表进程别名，script 代表需要执行的命令，env 是注入到服务中的变量。

最后修改 package.json 的 start 命令(项目为 express )为

如果需要查看 pm2 状态，使用

表明通过 pm2 启动项目。

停止或重启服务使用

自动启动

在实际情况下，偶尔会发生服务器宕机，可是重启后pm2应用不会被自动启动，这时候我们就需要去保存我们的pm2状态，然后配置开机自启。

执行后会输出

这表示pm2把当前应用列表启动信息保存到了磁盘文件上

执行后输出

这表明pm2往系统中写入了开机启动任务，开机是自动启动上次pm2保存的应用列表

这时候如果想测试，可以手动重启服务器试一下，查看一下pm2应用任务是否正确启动

再也不用担心重启后服务不起了。

nginx

作为一个高性能的http和反向代理服务，在linux上不免要选用它。

安装教程

代理教程

对于Web而已，80端口和443端口是十分重要的，原则上需要输入 http://domain.com:80 才可以浏览网页的，但由于默认端口是80，所以‘:80’可以忽略。同理对于https的443端口也一样。

所以我们常常需要在80端口监听多个服务，这就必须要用上nginx的代理功能了。用法如下：

常规配置

代理配置

nginx如果检测到vue.msg.com的请求，将 转发 请求到本机的8080端口，如果检测到的是react.msg.com请求，也会将请求 转发 到8081端口。

同样的，如果前面用pm2开启了node项目，而且运行在3000端口，并且已经做好了域名映射，如（api.msg.com），我们可以同理配置代理

上面就是linux上部署项目的教程（后续介绍 docker部署 ）。

---