Nginx本地部署Vue项目

Posted 2023-03-01

参考技术A 如何使用nginx来部署我们打包好的前端Vue项目

因为这里做的演示是本地服务，就需要安装在自己的电脑上

1.确认你的电脑是否安装homebrew，打开电脑终端输入：

2.确认homebrew是否安装成功，输入

3.安装nginx

4.确认nginx是否安装成功

6.进入bin目录

输入，启动

验证是否启动成功
http://localhost

如果出现下图，证明nginx已经启动成功

该问题是由于8080端口被占用，解决

首先需要先在打包之前在 Vue 的配置文件里去修改公共路径的配置

同时在项目的 router 目录下 index.js 为 Vue 项目指定路由基本路径为 /

8.打包前端项目,打包成 dist 目录

将打包好的前端项目放到 Nginx 的 html 目录下去

然后将 dist文件 拖到 html 中就可以了

修改一下 Nginx 的配置文件 nginx.conf
配置改动：
(1）端口号为 8088
(2) 服务名称为 localhost
(3)root目录为 html/dist
(4)location地址为 /
处理前台路由 history 模式刷新 404 的问题

配置修改好之后，我们就可以使用 Nginx 的命令来启动 Nginx 服务

如果没有任何提示，就说明 Nginx 服务重新加载配置成功了

浏览器地址栏里访问 http://localhost:8088 了

1.安装nginx(window) http://nginx.org/en/download.html
解压即可

2.准备打包好的vue项目(dist) 这里dist文件目录在D:\nginx-1.21.1\html\dist

3.在nginx安装目录中找到D:\nginx-1.21.1\conf）进行修改
vue history模式下nginx

常用的指令有：