云服务器 nginx 部署多个Vue项目

本篇文章不提供如何在服务器上安装nginx以及Vue打包,相关内容请参考我另外一篇文章:
将Vue项目部署到服务器

注:我的Vue-cli版本为4.5+,如果不是4+的版本,那可能文件位置有所不同,仅作参考。

前提:我们需要配置两个vue项目,一个是直接用IP或者域名就可以访问,一个后面还接着/test。

第一个Vue项目访问地址:www.test.com
第二个Vue项目访问地址:www.test.com/test

		location / {
            root /你的路径/dist/;
        }

        location /test {
            alias /你的路径/dist/;
        }

修改保存之后,进入nginx安装文件夹/sbin,执行命令:./nginx -s reload
注:于根路径访问的Vue项目,只需在nginx中配置即可,无需下面步骤

  • 步骤2:于第二个Vue项目根目录下,创建vue.config.js,文件的内容如下:
    在这里插入图片描述
module.exports = {
  publicPath: '/test/'
}

因为我们第二个Vue项目的访问路径是:www.test.com/test,所以这里填test,如果路径是www.test.com/example,那么就是/example/

  • 步骤3:于第二个Vue项目中的路由router配置文件中,代码如下:
const router = new VueRouter({
  routes,
  base: '/test'
})

找到创建VueRouter的地方,加上base即可,这里的test与步骤二同理。

步骤4:第二个Vue项目完成2、3步骤之后,重新打包dist,推送至服务器即可!
2022/1/26,上个月升级Vue3+Vite+TS,配置方法大同小异,好像不需要在vite里面配置了,Vue Route中的配置如下:

import { ...,createWebHashHistory } from 'vue-router'
...路由相关代码
const router = createRouter({
  history: createWebHashHistory('/test'),
  routes
})
  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在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` 目录已经构建并位于正确的路径上。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值