nginx同域名下部署多个vue项目

最新推荐文章于 2024-08-11 23:15:31 发布

qq_35321405

最新推荐文章于 2024-08-11 23:15:31 发布

阅读量7k

点赞数 11

分类专栏： vue

本文链接：https://blog.csdn.net/qq_35321405/article/details/96135145

版权

vue 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

一.需求

想要在同一个域名下部署多个前端项目，通过不同url来区分调用相应前端项目。
比如：部署项目a，项目b。想要效果如下。
浏览器输入：http://localhost:8082/a/，展示项目a。
浏览器输入：http://localhost:8082/b/，展示项目b。

二. 本地下载nginx服务器

http://nginx.org/en/download.html

三. nginx常用命令

进入nginx安装目录，打开终端
启动服务：start nginx
停止服务：nginx -s stop nginx -s quit
修改配置后重新加载生效：nginx -s reload
查看nginx版本：nginx -v

四. nginx目录介绍

在这里插入图片描述
一般我们部署的时候，会把vue项目发布到html文件夹中，并且修改conf文件夹下的nginx.conf文件。

五. vue打包配置

修改vue.config.js，没有这个文件在项目根目录新建一个。
修改全局router.js文件

六.nginx.conf配置

  server {
        listen       8082;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
       location / {
           root html;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }
         location /a/ {
           alias html/app/;
           index  index.html index.htm;
           try_files $uri $uri/ /app/index.html;
        }
       location /b/ {
           alias html/pc/;
           index  index.html index.htm;
           try_files $uri $uri/ /pc/index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

6.1 可以单独写一个配置文件，在nginx.conf中引入。这样方便我们后期的维护

在conf目录下新建一个otherconf文件夹。并在此文件夹下新建一个a配置文件。
在这里插入图片描述
a文件

    server {
        listen       8083;
        server_name  localhost;

       location / {
           root html;
           index  index.html index.htm;
           try_files $uri $uri/ /blog/index.html;
        }

         location /a/ {
           alias html/app/;
           index  index.html index.htm;
          try_files $uri $uri/ /app/index.html;
        }

       location /b/ {
           alias html/pc/;
           index  index.html index.htm;
          try_files $uri $uri/ /pc/index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

在nginx.conf文件http模块中引入。

http {
    include       mime.types;
    # 引入所有配置
    include otherconf/*.conf;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
 .... 
}