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
    评论
要在Nginx部署多个Vue项目,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Nginx。如果尚未安装,请根据你的操作系统的要求进行安装。 2. 在Nginx的配置文件夹中创建一个新的配置文件,比如 `/etc/nginx/conf.d`。在该文件夹中创建一个名为 `myproject.conf` 的文件,用于配置你的项目。 3. 打开 `myproject.conf` 文件,并输入以下内容: ``` server { listen 80; server_name your_domain.com; // 替换为你的域名或IP地址 location /project1 { alias /path/to/project1/dist; // 替换为第一个Vue项目的dist目录路径 try_files $uri $uri/ /project1/index.html; } location /project2 { alias /path/to/project2/dist; // 替换为第二个Vue项目的dist目录路径 try_files $uri $uri/ /project2/index.html; } // 可以继续添加其他项目的配置 error_page 404 /index.html; } ``` 上述配置中,我们使用了 `alias` 指令将每个项目的 `dist` 目录映射到对应的路径。`try_files` 指令用于处理路由请求,确保能够正确访问到每个Vue项目的路由。 4. 保存并关闭文件。 5. 检查配置文件是否存在语法错误:执行 `nginx -t` 命令。 6. 如果没有错误,重新加载Nginx配置文件:执行 `sudo service nginx reload`(根据你的操作系统和Nginx安装方式可能会有所不同)。 7. 确保你的域名或IP地址正确解析到服务器,并尝试访问 `http://your_domain.com/project1` 和 `http://your_domain.com/project2`,应该能够分别访问到两个Vue项目。 按照上述步骤,你可以配置Nginx部署多个Vue项目。你可以根据需要添加更多的项目配置。在配置完成后,确保每个项目的 `dist` 目录已经构建并位于正确的路径上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值