需求描述

在云服务器上部署两个vue项目

1. 上传vue项目

  • 将项目 itweb打包后，上传到云服务器后，目录为 /home/dist
  • 将项目 itdic打包后，将包名修改为dicDist，上传到云服务器后，目录为 /home/dicDist

nginx部署多个vue项目_上传

可以在项目 itdic的 vue.config.js 中，添加以下配置，将默认打包的名称修改为dicDist

module.exports = {
    publicPath: './',  // 【必要】静态文件使用相对路径
    outputDir: "./dicDist", //打包后的文件夹名字及路径

2. 修改 nginx 的配置

 nginx 的server 配置如下：

server
    {
      listen 80;
      server_name localhost;

      # vue项目itweb
      location / {
          root /home/dist;
          index /index.html;
      }

      # vue项目itdic
      location /dic {
          alias /home/dicDist;
      }
    }

/ 对应的项目目录使用 root 指定，其他路由对应的项目目录都使用 alias 指定

3. 重启 nginx

 修改了nginx 配置后，重启nginx才能生效

nginx部署多个vue项目_nginx_02