Vue SPA项目在非网站根目录的部署方法-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 在开发vue项目的时候,大多都是spa单页面应用,需要部署到服务器根目录;但有时候我们需要部署到其他路径,例如:/app/内怎么才能实现呢? 1、修改配置文件 config/index.js { build: { assetsPublicPath: '/app/', } } router/index.

在开发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
})

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;

        }
    }

思考:怎么才能在一个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;

        }
    }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章