如何将vue项目部署到nginx服务器

互联网 2022/5/14 7:21:11

摘自:https://blog.csdn.net/web_Fkk/article/details/118597867一、window系统下载nginx建议下载稳定版,下载后解压到某个文件夹进入nginx文件夹有个cmd窗口也就是(nginx.exe),双击启动nginx在浏览器输入localhos,看到下面的页面就是启动成功 二、mac下载nginx 首先…

摘自:https://blog.csdn.net/web_Fkk/article/details/118597867

一、window系统下载nginx

在这里插入图片描述

  1. 建议下载稳定版,下载后解压到某个文件夹
  2. 进入nginx文件夹有个cmd窗口也就是(nginx.exe),双击启动nginx
  3. 在浏览器输入localhos,看到下面的页面就是启动成功
    在这里插入图片描述

二、mac下载nginx

首先,mac系统下载得用brew

安装工具:

homebrew(还没用过的小伙伴可以点链接进行了解或者自行百度)

安装完后,使用下面的命令下载nginx,下面命令是下载的国内源,因为下载国外的话非常非常慢,所以我选择了下载国内源

/bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”

完成后,在终端输入下列命令,查看nginx安装目录

open /usr/local/etc/nginx/

成功打开了nginx目录,也可以看到servers目录以及nginx.conf的配置文件(后面会用到这个配置文件)。但我们并没有找到nginx被安装到了哪里。

终端继续执行:

open /usr/local/Cellar/nginx //其实这个才是nginx被安装到的目录

启动nginx,终端输入如下命令

nginx

没有报错即为启动成功。

打开浏览器访问localhost,就会能看到nginx的欢迎界面啦。

**

部署项目到nginx

**

(1)第一种方法:
将使用npm run build打包好的项目,找到nginx文件下的html文件夹将里面的内容替换为dist文件夹里面的内容,然后刷新一下页面即可。

在这里插入图片描述

(2)第二种方式:
就是将dist整个文件夹复制到nginx的文件夹下(与html文件夹同级),该方法要到 conf文件夹下nginx.conf文件里面修改相关配置
在这里插入图片描述

该文件里面的location / {} 里面的root就是解压nginx的目录,意思是说,默认打开的是root(也就是根目录)下的HTML里面的index.html/index.htm的网页,也就是第一种方式打开部署到nginx项目的途径
在这里插入图片描述

采用第二种方式部署的话,就要修改这里面的路径配置(将html修改为dist),如下图:
在这里插入图片描述
修改完后要重启nginx,要重启才能生效。

sudo nginx -s reload // 修改配置后重新加载生效

sudo nginx -s stop // 快速停止nginx

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[如何将vue项目部署到nginx服务器]http://www.zyiz.net/tech/detail-320857.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>