nginx部署vue项目(包括一个nginx部署多个vue项目)

部署准备

  • vue项目打包
    首先打开public下的index目录,修改后台的URL地址,如下图所示:
    在这里插入图片描述

    使用CMD,打开命令行程序。进入项目根目录。执行命令:npm run build,完成打包。在根目录输出结果如下:
    在这里插入图片描述
    如果在一个nginx的同一个端口号下配置多个vue应用,则需要在第二个应用开始,按照以下步骤修改,再执行打包程序。
    第一步:修改根目录下的vue.config.js的publicPath路径,如下:
    在这里插入图片描述
    第二步,修改路由,在src目录下找到reouter目录,添加base属性,具体操作如下:
    在这里插入图片描述
    执行命令:npm run build,完成打包

  • nginx下载与安装
    nginx下载地址: http://nginx.org/en/download.html
    进入官网后,下载最新的稳定版本,如下图所示 在这里插入图片描述
    下载完成后得到,nginx压缩包,解压后目录结构如下:
    在这里插入图片描述
    点击该目录下ngnix,启动ngnix服务,启动后打开浏览器,输入URL地址,呈现如下画面代表ngnix安装成功。
    在这里插入图片描述
    注意问题:如果出现不了上述界面,按照以下步骤进行检查。

  • 启动任务管理器检查,nginx是否启动,如下图检查是否包含红色框内nginx是否启动服务在这里插入图片描述

  • 如果服务没有启动,打开ngnix日志目录查看错误日志,如果错误号是10013,检查错误号是否被占用
    在这里插入图片描述

  • 修改配置文件。打开ngnix.conf,修改端口号,如下图所示。
    在这里插入图片描述

  • 保存后,重新启动服务即可

如果使用IE浏览器,有可能出现下图界面,将浏览器换成google浏览器即可。
在这里插入图片描述

nginx配置

  • 将打包好的vue程序(即:disk目录)拷贝至nginx目录下的html目录。
  • 修改html下index文件,配置api请求路径,如下图

在这里插入图片描述
配置nginx.config文件,打开文件配置IP地址、端口号、根目录及首页文件,如下图所示
在这里插入图片描述

完成后重启nginx服务;在命令行,执行以下命令,杀掉nginx服务

taskkill /f /im nginx.exe

重启服务,输入命令,重启服务:

nginx

如下图:
在这里插入图片描述
打开浏览器,输入IP和端口号,查看应用,完成部署。

如果多个应用,可以将打包好的文件,存放在和html平行目录下,如下图所示
在这里插入图片描述
dist和sp分别是其他两个应用,在每个应用的index文件配置api URL。
配置这两个应用路径文件,如下图所示:
在这里插入图片描述
重启nginx,在端口号后输入配置的别名:即可打开另一项目的首页。

在这里插入图片描述

  • 2
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值