把 Vue项目打包部署到 Nginx 上

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

前言

昨天说到学了 Nginx 一些很基础的东西，但是也算是对这个东西有了基本的印象，突然想起来师傅之前也提到过把前端的 Vue 项目打包部署到 Nginx 上的过程，现在就结合者残存的记忆，以及在网络上找到的资料，把这一个过程稍微顺一顺~

我们都知道 Nginx 是一个高性能的HTTP和反向代理服务器，所有就用它来做静态资源服务器和后端的反向代理服务器。我用到的应该是用它部署我们用Vue搭建的前端项目。

在打包之前需要对我们写的Vue项目做一点点修改，因为开发环境和生产环境是不一样的。这个应该是具体项目具体分析吧！打包的时候会有相应的文档说明书的！应该是~

在控制台的终端输入：npm run build
等这个命令执行完会在项目结构的目录里看到增加了一个dist的文件夹，里面会有index.html，直接访问这个就可以。此外还有一个static的文件夹。
到这打包就完成了，下面需要把这个包放到服务器上。

把打包好的 dist 文件夹里的这两个文件（static 文件夹和 index.html ）复制到 Nginx 文件中的 html 文件夹里，直接拖进去就行，会自动覆盖里面原来的东西。

把内容复制粘贴进去以后需要在修改一下nginx 的配置文件；在 conf 的文件夹下的 nginx.conf 文件里，在 server 属性里面新增一个配置：

location / {
 try_files $uri $uri/  /index .html;  # 这里可以理解指定到 html 文件夹下的 index.html
}

应该也是一样的道理，具体项目具体分析，会有相应的文档说明书的！

配置完成后，需要重启 Nginx !启动成功后在浏览器输入相应 url ，成功的话就会看到自己项目的页面！