使用Nginx部署Vue项目超详细图文教程!含踩坑步骤!
Nginx部署Vue项目
使用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,或者想部署多个项目的话。你需要通过修改配置文件来完成。
这里放一个我自己的配置。具体可以参考注释。
重新启动 Nginx
- 使用 nginx -s reload 可以重新加载 Nginx 的配置文件,但如果配置文件有错,不一定会抛出异常
- 使用 nginx -s stop 先停止 Nginx 服务,再使用 nginx 尝试启动 Nginx 服务,如果配置文件有异常,则会抛出异常告知启动失败
linux环境
通常情况下很少使用windows来作为nginx的服务器,一般使用linux。对于linux安装nginx有两种方式,一种是使用官方已经编译好的包来安装,一种是使用源码构建安装。
第一种方式参考官方地址
第二种方式参考官方地址中的Building from Sources片段,这种实际上就是下一个tar.gz包仍到linux服务去自己编译。
在linux服务上和window环境上使用nginx部署vue项目并没有太大差异,把构建好的vue项目dist上传到linux服务上,通用修改nginx服务器中的root来指向dist就ok了,然后使用
# centos 7 systemctl restart nginx.service # centos 6 service nginx restart
或者是平滑重启
service nginx reload
centos 7 systemctl restart nginx.service
centos 6
service nginx restart
或者是平滑重启
service nginx reload
当然,我更推荐宝塔面板,操作简介方便!