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 (若配置文件没做修改可忽略这一步)

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

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

部署成功!

相关推荐
小镇程序员6 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 分钟前
前端图像处理(一)
前端
程序猿阿伟16 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒17 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪26 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背29 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M40 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js