使用Nginx部署Vue项目超详细图文教程！含踩坑步骤！

Nginx部署Vue项目

很多小伙伴在做完Vue项目之后，想要部署到服务器上自己运行试试。其实使用Nginx就可以轻松的做到，并且实现请求转发等功能。下面来看看使用步骤吧。

使用Nignx部署Vue项目步骤

1.打包Vue项目

npm run build

首先使用打包命令打包Vue项目，之后得到一个dist文件夹。这里面存放的是已经打包好的静态资源文件。

注意：这里不同的项目打包的命令可能不一样，需要在 package.json 里看 scripts，每个属性就是一个命令，一般都会有 npm run serve, npm run build, npm run lint… 等等

不同的项目结构不一样哦。我使用的是vue-element-admin框架。具体打包方法可以查看框架的相关文档哦。

2.复制dist文件夹到Vue默认目录

安装好Nginx，找到安装根目录。将dist目录里的文件复制到html中。这是默认的nginx根目录，如果这样做的话你不用修改配置文件就可以直接运行。

复制完成后，双击nginx.exe运行nginx就可以运行啦。

3.高级配置

通常情况下ngxin是安装到单独的服务器上，因此一般是把vue打包后的dist仍到服务上的具体位置，然后修改nginx.conf的root路径来指向我们的dist。

如果你想根据自己的需求来配置nginx，或者想部署多个项目的话。你需要通过修改配置文件来完成。