ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

nginx下部署vue项目

2021-12-14 16:36:13  阅读:106  来源: 互联网

标签:index vue 部署 nginx html 打开 端口号


2021-12-14

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

首先要去nginx官网下下载nginx: 
下载地址:https://nginx.org/en/download.html 

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

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

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

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

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

        server {undefined
            listen       8088;
            server_name  localhost;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;

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

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

首先找到自己的vue的夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹

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

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

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

标签:index,vue,部署,nginx,html,打开,端口号
来源: https://www.cnblogs.com/zhangchao0515/p/15688541.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有