在开发 vue 应用的时候，要去创建一些 vue 组件，写一些 typescript 代码，这些东西需要编译一下才能在浏览器上运行。

在用 vue-cli 创建的项目里，定义了一个 serve 命令，运行这个命令以后会给我们创建一个 web 服务器，它还会监视项目里的文件变化，有变化就会自动编译应用，在浏览器上可以实时的看到修改之后的结果。

假设你现在已经完成了开发，准备正式把应用部署到服务器上。你要做的就是在服务器上搭建一个 Web 服务，然后编译一下 vue 应用，把编译好的应用放在这台 web 服务器上就行了。

在 package.json 里面，定义了一个 build 命令，执行它的时候，运行的是 vue-cli-service build 这个命令。在终端，项目所在目录的下面，可以试一下这个 build 命令，npm run build ，或者也可以执行 yarn build 。

编译完成以后会提示 Compiled successfully，编译成功。编译之后的应用会放在项目的 dist 目录里面，这里其实就是一些脚本文件，样式表，还有一些静态资源。

也就是你要部署的 vue 前端应用就是这个 dist 目录里的东西。你可以在服务器上安装一个 nginx，配置一台服务器，然后把编译生成的 dist 目录上传到 web 服务器上就行了。

我现在把 vue-demo.ninghao.net 这个主机名指向了我的一台服务器，可以先登录到服务器配置一下，新建一个终端标签。用 ssh 登录到服务器，ssh root@42.120.40.68 ，42.120.40.68 是我的一台服务器的 ip 地址。

进来以后先给要部署的应用创建一个目录，比如我要把它放在 /mnt 这个目录的下面，新建一个 vue-demo 。下面把编译生成的应用放到这个目录的下面。

在项目下面，可以使用 scp 这个命令，把本地文件或者目录复制到远程服务器上。加上一个 -r 选项，因为要复制的是一个目录，要复制的目录是 dist 这个目录，编译生成的应用就放在这个目录的下面。然后设置一下远程的位置，root@42.120.40.68，位置是 /mnt/vue-demo ，执行一下。

回到登录到服务器的这个终端标签，查看一下当前目录下的东西，你会发现有一个 dist 目录，它里面的东西就是刚才用 scp 复制过来的编译好的应用。

下面我们再去配置一台 nginx 服务器，我的服务器用的是 centos 操作系统，用 dnf 可以在服务器上安装一个 nginx，可以执行 dnf install nginx ，完成以后可以执行 systemctl start nginx，启动一下 nginx 服务，然后进入到 nginx 的配置目录，/etc/nginx/conf.d ，在这个目录下面新建一个配置文件。用 vi 创建一个文件，名字是 vue-demo.ninghao.net.conf，注意文件要用 .conf 结尾。

定义一个 server，里面用 listen 指令设置一下监听的端口号，默认是 80，如果你想用 https 访问的话，需要额外去申请一个 ssl 证书，再配置一下。这里我们暂时使用 http 协议。

用 server_name 设置一下服务器名，我这里是 vue-demo.ninghao.net，之前我已经配置好了这个主机名，让它指向我的这台服务器的 ip 地址。

再添加一个 location ，位置是 / ，在这个 location 里面，用 root 设置一下根目录，位置是 /mnt/vue-demo/dist，这里就是编译生成的 vue 应用所在的位置。

下面用 index 设置一下默认打开的东西，设置成 index.html 。再添加一个 try_files $uri $uri/ /index.html;

按一下 esc 退出 vi 的编译模式，然后输入 :wq ，按下回车，保存并退出。执行 nginx -t，测试一下 nginx 的配置有没有问题，确定没有问题以后，让配置生效需要重载一下 nginx 服务，执行 systemctl reload nginx 。

打开浏览器，访问一下 vue-demo.ninghao.net ，测试一下。现在我们就部署好了这个 vue 应用。