美文网首页LinuxVue小知识
一个域名nginx配置多个vue项目

一个域名nginx配置多个vue项目

作者: 吖蛋黄 | 来源:发表于2020-03-23 18:00 被阅读0次

    在已有项目一的情况下,不改变项目一的访问地址,在同一域名的二级目录下部署项目二,配置如下:

    一、修改vue.js配置

    1. 修改vue-router路由配置 src/router/index.js文件

    a. 项目一

    const router = new VueRouter({
      mode: 'history',
      routes: routes
    })
    

    b. 项目二

    const router = new VueRouter({
      base: 'jx',
      mode: 'history',
      routes: routes
    })
    
    注意图中标记: image.png

    2.注意webpack打包配置 config/index.js

    a. 项目一

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    

    b. 项目二

    assetsSubDirectory: 'static',
    assetsPublicPath: '/jx/',
    
    注意图中标记: image.png

    二、nginx配置

    1. nginx-1.15.5\conf\nginx.conf 文件的server配置如下:

    # 一个域名下多个Vue.js项目的nginx配置
    server {
            listen      8001;
            server_name  localhost;
            
            # 项目一
            location / {
                root C:/adanhuan/cy-project/cycxvux/cy;
                try_files $uri $uri/ @router;
                index  index.html  index.htm;
            }
            
            location @router {
                rewrite ^.*$  /index.html last;
            }
            
            # 项目二
            location /jx {
                alias C:/adanhuan/cy-project/cycxvux/jx; 
                try_files $uri $uri/ @router_jx;
                index  index.html  index.htm;   
            }
            
            location @router_jx {
                rewrite ^.*$  /jx/index.html last;
            }
            
            # 接口请求代理,解决跨域
            location /api { 
                proxy_pass http://h5cs.cycxvip.com;
            }
        }
    
    注意图中标记(容易踩坑): nginx.conf.png

    三、重启nginx后,项目访问地址如下:

    项目一:http://localhost:8001/
    项目二:http://localhost:8001/jx/

    相关文章

      网友评论

        本文标题:一个域名nginx配置多个vue项目

        本文链接:https://www.haomeiwen.com/subject/txiwyhtx.html