Nginx部署vue项目

在开始部署之前,我们先要准备好以下工作:

  • 一个能跑通的Vue项目
  • 一个正常的、安装了nginx的服务器(可以是本地电脑)
  • 服务器上安装了Node.js(nodejs官网:https://nodejs.org/en/ 可下载最新LTS版本并安装)
    如果说服务器有了,nginx没安装?

那没关系,安装起来很简单,可以参考以下步骤:

安装nginx

(1)官网下载安装包。官网:http://nginx.org/en/download.html

(2)找到下载的安装包,解压缩。(nginx不需要运行安装,此时解压的位置就算是nginx安装的位置)

包解压后会得到如下目录。里面比较重要文件夹有:

conf:里面有配置文件nginx.conf

html:放打包好的vue项目

nginx.exe:nginx启动项

(3)打开配置文件conf/nginx.conf,查看配置项。

如下图,listen项为nginx监听的端口,默认是80。如果本地80端口被占用,需要修改成其他端口。

ps.想查看端口是否被占用,cmd使用命令:

sql 复制代码
// 查看所有运行的端口
netstat -ano
// 查看指定端口是否被占用(未占用返回空值,已占用返回占用信息)
netstat -aon|findstr "8081"

(4)启动nginx,有两种方法:

①双击nginx.exe,屏幕上会闪过一个黑色弹窗,意为启动完成。

②打开cmd,cd切换到nginx所在文件夹下,输入命令:start nginx,回车。

(5)打开浏览器,输入网址:http://localhost:812(假设配置文件中端口修改成812)

浏览器出现以下界面,则启动成功!

(6)关于nginx的其他命令

sql 复制代码
// 启动服务
start nginx
// 快速停止nginx
nginx -s stop  
// 完整有序的停止nginx
nginx -s quit
// 重启nginx,一般用在修改配置文件之后
nginx -s reload
//  使用taskkill命令
taskkill /f /t /im nginx.exe

nginx安装完毕,接下来就可以开始部署项目了------

一、打包并移动vue项目

运行命令:npm run build

到前端项目目录下,找到dist文件夹。复制dist下的文件,粘贴至nginx根目录下的html

二、修改配置文件nginx.conf

完成上一步后,打开我们的配置文件<nginx.conf>,找到server节点,修改参数。

初始的配置参数是这样的------

大概需要修改的配置如下:

listen:代理端口(自定义未被占用的端口号)

server_name:代理名称(域名、ip),本地就用localhost

root:项目存放目录(如果只发布一个项目,就是直接把dist拷贝到html文件夹下这种情况,可以直接用html,否则要指定文件夹)

try_files:一个覆盖所有情况的候选资源。如果 URL 匹配不到任何静态资源,返回同一个 index.html 页面

三、重启nginx,验证效果

打开cmd,输入重启命令:nginx -s reload (若配置文件没做修改可忽略这一步)

刷新浏览器,查看项目效果!

此处就不放我的项目截图了,放个白板项目凑数------

部署成功!

相关推荐
customer0816 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_3901617732 分钟前
防抖函数--应用场景及示例
前端·javascript
雨雪飘零1 小时前
Windows系统使用OpenSSL生成自签名证书
nginx·证书·openssl
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web