服务器之家:专注于服务器技术及软件下载分享
分类导航

云服务器|WEB服务器|FTP服务器|邮件服务器|虚拟主机|服务器安全|DNS服务器|服务器知识|Nginx|IIS|Tomcat|

服务器之家 - 服务器技术 - Nginx - nginx下部署vue项目的方法步骤

nginx下部署vue项目的方法步骤

2020-03-13 15:53前端的搬运工 Nginx

这篇文章主要介绍了nginx下部署vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来。

首先要去nginx官网下下载nginx:

下载地址:https://nginx.org/en/download.html

nginx下部署vue项目的方法步骤

下载下来会是一个解压包,解压到你想放的文件夹下

nginx下部署vue项目的方法步骤

运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了:

nginx下部署vue项目的方法步骤

然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf

nginx下部署vue项目的方法步骤

点击进去然后找到一个nginx.conf的文件

nginx下部署vue项目的方法步骤

然后把它用编辑器的方式打开,打开之后找到这里的sever的listen就是你的端口号,默认的是80端口,你可以根据自己没有被占用的端口进行改写,改写完成之后保存然后打开你的localhost:你改写的端口号就OK了

  1. server { 
  2.  
  3. listen 8088; 
  4.  
  5. server_name localhost; 
  6.  
  7. #charset koi8-r; 
  8.  
  9. #access_log logs/host.access.log main; 
  10.  
  11. location / { 
  12.  
  13. root html; 
  14.  
  15. index index.html index.htm; 
  16.  

nginx下部署vue项目的方法步骤

上面是安装配置nginx服务器的方法,下面就是如何把自己的vue项目部署到你所安装配置的nginx服务器上的步骤了:

首先找到自己的vue的项目然后输入命令 npm run build 他会在你的vue目录下生成一个dist文件夹里面就是你的vue的项目

nginx下部署vue项目的方法步骤

然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹

nginx下部署vue项目的方法步骤

把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留,然后把你刚刚复制的文件粘贴进去

nginx下部署vue项目的方法步骤

然后打开浏览器输入最开始改的端口号localhost:你所改的端口号回车;你就会看到自己的vue的项目跑起来了我的打开就是这样的咯:

nginx下部署vue项目的方法步骤

这样就大功告成了~~~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/github_39088222/article/details/79482461

延伸 · 阅读

精彩推荐
  • Nginx利用nginx和腾讯云免费证书制作https的方法

    利用nginx和腾讯云免费证书制作https的方法

    这篇文章主要介绍了利用nginx和腾讯云免费证书制作https的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...

    dalaoyang5992019-12-30
  • Nginx如何优化Nginx的处理性能

    如何优化Nginx的处理性能

    Nginx是一个很强大的高性能Web和反向代理服务,它具有很多非常优越的特性,在连接高并发的情况下,Nginx是Apache服务不错的替代品。其特点是占有内存少,...

    Dockone.io5142020-12-11
  • Nginx通过Nginx规则重写URL去掉index.php不显示index.php

    通过Nginx规则重写URL去掉index.php不显示index.php

    Nginx不仅占用内存少,并发能力强,而且拓展功能丰富,可以通过安装模板来强化功能,也能通过规则优化,优化服务器并发处理能力,是建站的不二之选...

    Genius日记5872020-10-16
  • NginxNginx动静分离实现案例代码解析

    Nginx动静分离实现案例代码解析

    这篇文章主要介绍了Nginx动静分离实现案例代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参...

    盗哥泡茶去了3382020-09-27
  • Nginxnginx ssl免密码重启教程详解

    nginx ssl免密码重启教程详解

    这篇文章给大家介绍了nginx 如何启动以及nginx ssl 免密码重启 的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧 ...

    mrr4272019-11-19
  • NginxNginx Rewrite使用场景及代码案例详解

    Nginx Rewrite使用场景及代码案例详解

    这篇文章主要介绍了Nginx Rewrite使用场景及代码案例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可...

    盗哥泡茶去了11862020-09-27
  • Nginxnginx rewrite 伪静态配置参数和使用例子

    nginx rewrite 伪静态配置参数和使用例子

    nginx下伪静态配置参数详细说明,使用nginx的朋友,nginx rewrite 伪静态配置参数和使用例子 附正则使用说明 ...

    服务器之家3102019-10-08
  • NginxNginx location 和 proxy_pass路径配置问题小结

    Nginx location 和 proxy_pass路径配置问题小结

    本文是基于 location 的匹配末尾是否配置 / 和 proxy_pass 末尾是否配置 / ,进行测试,完全还原了整个测试过程,本文给大家介绍Nginx location 基本配置及相关配...

    自由早晚乱余生18742021-09-24