nginx部署多个vue项目

需求描述

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

• 浏览器访问   http://106.12.123.173 时，访问项目 itweb
• 浏览器访问   http://106.12.123.173/dic 时，访问项目 itdic

1. 上传vue项目

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

可以在项目 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才能生效