Vue SPA项目在非网站根目录的部署方法

在开发vue项目的时候，大多都是spa单页面应用，需要部署到服务器根目录；但有时候我们需要部署到其他路径，例如:/app/内
怎么才能实现呢？

1、修改配置文件

config/index.js
{
  build: {
    assetsPublicPath: '/app/',
  }
}

router/index.js
let router = new Router({
  mode: 'history',
  base: '/app/', // 保持和assetsPublicPath路径一致
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes
})

        

          
        
        
        

          

          AI 代码解读
        
      
      

2、修改nginx配置

    server {
        listen       9000; // 开启一个服务，监听9000端口
        # listen       somename:8080;
        #server_name  somename  alias  another.alias;

        location / {
            root /Users/kaixie/code/server; // 设置服务器根目录
            try_files $uri $uri/ /app/index.html; // 把所有请求都返回/app/index.html
        }

        location /api {
            proxy_pass   http://localhost:2002;

        }
    }

        

          
        
        
        

          

          AI 代码解读
        
      
      

思考：怎么才能在一个nginx服务里配置两个项目呢？访问根目录是一个项目，访问app路径是一个项目

如下配置

 server {
        listen       9000;
        # listen       somename:8080;
        #server_name  somename  alias  another.alias;

        location / { // 监听根目录访问，这里返回的是正常的spa项目
            root /Users/kaixie/code/server;
            try_files $uri  $uri/ /index.html;
        }
        location /app { // 监听 app路径的访问， 访问路径处理过的spa项目
            root /Users/kaixie/code/server;
            try_files $uri  $uri/ /app/index.html;
        }

        location /api {
            proxy_pass   http://localhost:2002;

        }
    }

        

          
        
        
        

          

          AI 代码解读