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

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

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

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

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

• 步骤1：配置nginx.conf文件，该文件在nginx安装文件夹/conf目录下，如下所示，只展示需要配置的代码(加在http>server下)：
  注：alias的结尾必须有/
  如何在服务器中修改文件可以参考我的另一篇文章：
  云服务器安全(centos)之配置window下的SSH密钥免密登录

		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
})