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

 更新时间:2019年12月05日 11:40:42   作者:前端的搬运工  
这篇文章主要介绍了nginx下部署vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

 server {
      listen    8088;
      server_name localhost;

      #charset koi8-r;

      #access_log logs/host.access.log main;

      location / {
        root  html;
        index index.html index.htm;
    }

这里写图片描述

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

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

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

相关文章

  • Nginx安装lua-nginx-module模块的方法步骤

    Nginx安装lua-nginx-module模块的方法步骤

    ngx_lua_module 是一个nginx http模块,这篇文章主要介绍了Nginx安装lua-nginx-module模块的方法步骤,非常具有实用价值,需要的朋友可以参考下
    2018-12-12
  • 利用Nginx处理Vue开发环境的跨域的方法

    利用Nginx处理Vue开发环境的跨域的方法

    这篇文章主要介绍了利用Nginx处理Vue开发环境的跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • nginx下的代理服务器80端口被封的解决方案

    nginx下的代理服务器80端口被封的解决方案

    这篇文章主要是讲:通过nginx下面的代理服务器,实现访问A地址的时候自动代理到B地址的某个端口,主要用于标题说的某个端口被日.其他东西都正常的情况下,这玩意早上我刚刚测试过,这博客就是个很好的例子.
    2010-06-06
  • 详解Nginx轮询算法底层实现的方法

    详解Nginx轮询算法底层实现的方法

    这篇文章主要介绍了详解Nginx轮询算法底层实现的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 查看nginx配置文件路径和资源文件路径的方法

    查看nginx配置文件路径和资源文件路径的方法

    这篇文章主要介绍了查看nginx配置文件路径和资源文件路径,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • Nginx实现跨域使用字体文件的配置详解

    Nginx实现跨域使用字体文件的配置详解

    这篇文章主要给大家介绍了关于Nginx实现跨域使用字体文件的配置方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 使用nginx搭建点播和直播流媒体服务器的方法步骤

    使用nginx搭建点播和直播流媒体服务器的方法步骤

    本篇文章主要介绍了使用nginx搭建点播和直播流媒体服务器的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • nginx HTTP模块配置常用指令

    nginx HTTP模块配置常用指令

    这篇文章主要介绍了nginx HTTP模块在配置文件中常用的指令,详解了每个指令的含义、语法和注意事项等,需要的朋友可以参考下
    2014-03-03
  • 详解nginx配置location总结及rewrite规则写法

    详解nginx配置location总结及rewrite规则写法

    本篇文章主要介绍了详解nginx配置location总结及rewrite规则写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Nginx与Lua灰度发布的实现

    Nginx与Lua灰度发布的实现

    这篇文章主要介绍了Nginx与Lua灰度发布的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论