Vue 项目服务器部署

利用 Nginx 将 Vue 项目部署到服务器上，通过本文章可以简单了解网站部署的知识，相应的其他 web 项目的部署也是可以同理而解，Nginx 的安装参考这篇文章 LNMP 安装指南 ，文中 “N” 的部分即 Nginx

服务器系统： Centos，服务器软件： Nginx

生成网页文件

当我们把 Nginx 安装完成的时候，Nginx 目录下有个 html 文件夹，里面存放着的便是我们的 web 文件，访问 Nginx 的 ip 地址看到的便是这个文件渲染的页面，通常以 index.html 为入口文件，若要以 index.php 作入口文件，需要做相应的配置实现。

好，现在我们知道了，Nginx 加载的页面放在 html 中，并且以 index.html 为入口，想想平时我们的项目打包之后，（一般来讲）会在 dist 目录下生成一个 index.html 和 static 文件夹，打包结束时命令行也会提示，打包出来的文件需要运行在 http server 上，以文件的形式打开不会运行。

Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

上传到服务器

我使用的连接服务器的工具是 MobaXterm ，是一个免费的服务器连接工具，参考文章 MobaXterm使用教程 ，个人感觉比 Xshell 用起来要简单一些，好多地方都很图形化的样子，还自带了 sftp 功能，便于上传和下载服务器上的文件，将 dist 目录下的文件上传到 Nginx 下的 html 目录下，运行命令就可以在 ip 访问的时候看到新的页面啦。

/server/nginx/sbin/nginx -t // 检测配置文件
/server/nginx/sbin/nginx -s reload // 重载

去掉路径后面的 #

页面路径后面缀着一个 # 看起来不太美观，那么有办法去掉它吗，当然是可以的，首先我们要在 Vue 项目的 router 的配置中，将 mode 改为 history 。然后修改 Nginx 的配置即可。

location / {
    try_files $uri $uri/ /index.html;
    root   /service/nginx/html/code/;
    index  index.html index.htm;
}