Nginx部署vue项目应用-Eswlnk Blog
智能摘要 AI
本文介绍了如何在同一端口（如80）下通过Nginx部署多个Vue项目。首先，调整Vue项目的`vue.config.js`中的`publicPath`以支持子路径访问，如`/vue/`。接着，配置Vue路由的`base`属性为`/vue/`。在Nginx配置中，通过`location`块分别设置Halo博客和Vue项目的代理路径，确保静态资源和请求正确转发。最终实现通过`localhost`访问Halo博客，通过`localhost/vue`访问Vue项目。文中还纠正了最初尝试直接使用`/halo`路径访问博客时遇到的问题。

配置参考 | Vue CLI
如何在nginx同一端口下部署多个vue项目 | 字节逆旅-掘金
【网络】[::]:80是什么意思 / [::]是什么意思 | 微笑丶1998-CSDN
nginx的反向代理proxy_pass指令 | 牛牛Blog-CSDN

Nginx部署vue项目应用-Eswlnk Blog

在一个端口号下部署多个应用

  1. 只有一个域名，例如我的域名为：localhost，只有一个端口80。
  2. 服务器部署了Halo博客，Halo默认端口为8090，并且已经使用nginx将其映射成了80，可以使用 localhost 直接访问到博客。
  3. 现在仍需要用这个域名部署一个Vue项目，使得其可以用 localhost/vue 来访问该项目。

前端配置

1、静态资源地址配置

在vue.config.js文件下找到publicPath配置。在官方文档可以查看publicPath说明。

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/vue/',
Nginx部署vue项目应用-Eswlnk Blog

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 (‘’) 或是相对路径(‘./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid应用的文件系统中。

注意是与package.json同级的vue.config.js，而不是public中的config.js，之前一直写错，导致找不到静态资源。

2、配置vue项目路由

将 base: ‘/vue/’, 应用到vue项目路由中。

Nginx部署vue项目应用-Eswlnk Blog

3、打包项目

使用npm run bulid打包之后，会生成dist文件夹，在dist文件夹中，你会找到index.html页面，类似下图。所有src的前缀会加上/vue/,并且会生成meta base=“/vue/”。

Nginx部署vue项目应用-Eswlnk Blog

nginx配置

1、找到nginx配置文件。

我的nginx在/www/server/nginx下。

cd /www/server/nginxllcd confllvim ngnix.conf
Nginx部署vue项目应用-Eswlnk Blog

2、编辑配置ngnix.conf文件。

2、编辑配置ngnix.conf文件。
 server
    {
      listen 80;# 端口号
      listen [::]:80;
      server_name cau1i.cn;# 域名
      client_max_body_size 1024m;
      
      # Halo的代理
      location / {
        proxy_pass http://localhost:8090/;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
      
      # Vue项目的代理
      location /vue {
          alias  /home/server/dist; # 项目所在位置，并且注意为alias而不是root
          index  index.html index.htm;
          try_files $uri $uri/ /vue/index.html; # 注意/vue/前缀
      }
      
      access_log  /www/wwwlogs/access.log;
    }
listen 80：端口号为80。
listen [::]:80：参考第三篇文章。
server_name：域名。
client_max_body_size：Nginx 默认的 client_max_body_size 配置大小为 1m，可能会导致在 Halo 后台上传文件被 Nginx 限制，可根据需要自行修改。
proxy_pass：参考第四篇文章。
alias /home/server/dist：为我的项目文件所在位置。
  1. listen 80：端口号为80。
  2. listen [::]:80：参考第三篇文章。
  3. server_name：域名。
  4. client_max_body_size：Nginx 默认的 client_max_body_size 配置大小为 1m，可能会导致在 Halo 后台上传文件被 Nginx 限制，可根据需要自行修改。
  5. proxy_pass：参考第四篇文章。
  6. alias /home/server/dist：为我的项目文件所在位置。
  7. root和alias的区别以及try_files的作用：参考第二篇文章。
Nginx部署vue项目应用-Eswlnk Blog

通过域名访问

1、通过 http://localhost/ 访问成功

2、通过 http://localhost/vue 访问成功

Nginx部署vue项目应用-Eswlnk Blog

起初错误的想法

  1. 起初想法是使用 localhost 直接访问项目，而使用 localhost/halo 访问博客。
  2. 但是如下配置，会导致halo找不到静态文件。
server
    {
      listen 80; 
      listen [::]:80;
      server_name cau1i.cn;
      client_max_body_size 1024m;
 
      location / {
          root   /home/server/dist;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html;
      }
 
      location /halo {
        proxy_pass http://localhost:8090/;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
      
      access_log  /www/wwwlogs/access.log;
    }