Add path support different than root

src/actions/config.js

@@ -8,4 +8,4 @@ export const headers = new Headers(
 export const token = process.env.VUE_APP_DRONE_TOKEN;
 
 // default server address.
-export const instance = process.env.VUE_APP_DRONE_SERVER || "";
+export const instance = process.env.VUE_APP_DRONE_SERVER || window.BASE_URL ? window.BASE_URL.replace(/\/$/, "") : "";

src/components/Header.vue

@@ -26,11 +26,12 @@
       <UserMenu :user="user"/>
     </div>
 
-    <Button v-if="!userPresent" href="/login" class="login" size="l" theme="light">Login</Button>
+    <Button v-if="!userPresent" :href="`${this.instance}/login`" class="login" size="l" theme="light">Login</Button>
   </header>
 </template>
 
 <script>
+import { instance } from "@/actions/config.js";
 import Logo from "@/components/logos/Logo.vue";
 import Button from "@/components/buttons/Button";
 import Search from "@/components/Search";
@@ -81,6 +82,11 @@ export default {
       return this.mediaType !== "desktop" && this.userPresent;
     }
   },
+  data() {
+    return {
+      instance: instance
+    };
+  },
   methods: {
     urlOrGoBack(routeName) {
       const from = this.$store.state.from;

src/components/UserMenu.vue

@@ -7,14 +7,15 @@
 
     <Popup :position="'bottom'" :align="'right'" :evict="!this.opened">
       <router-link to="/account" @focus.native="open" @blur.native="closeDelayed">User settings</router-link>
-      <a href="/logout" class="logout" @focus="open" @blur="closeDelayed">
+      <a :href="`${this.instance}/logout`" class="logout" @focus="open" @blur="closeDelayed">
         {{ $t("labels.logout") }}
       </a>
     </Popup>
   </div>
 </template>
 
 <script>
+import { instance } from "@/actions/config.js";
 import Popup from "@/components/Popup.vue";
 
 export default {
@@ -29,7 +30,8 @@ export default {
     return {
       opened: false,
       nextOpened: false,
-      clicked: false
+      clicked: false,
+      instance: instance
     };
   },
   methods: {

src/router/gates.js

@@ -1,3 +1,5 @@
+import { instance } from "../actions/config";
+
 /**
  * Returns a router gate that sets the default parameters
  * for the stage and step if undefined.
@@ -29,7 +31,7 @@ export const authorizer = (store, window) => (to, from, next) => {
   // routes. If the user is not authenticated,
   // redirect to login.
   if (to.meta && to.meta.requiresAuth && !store.getters.userPresent) {
-    window.location.href = "/login";
+    window.location.href = `${instance}/login`;
   } else {
     // proceed to the next guard.
     next();

src/router/router.js

@@ -15,9 +15,16 @@ import Settings from "../views/Settings.vue";
 import Search from "../views/Search.vue";
 import BuildsFeed from "../views/BuildsFeed.vue";
 
+var basePath;
+if (window.BASE_URL) {
+  var parser = document.createElement('a');
+  parser.href = window.BASE_URL;
+  basePath = parser.pathname
+}
+
 export default new Router({
   mode: "history",
-  base: "/",
+  base: basePath || "/",
   routes: [
     {
       path: "/login/form",

src/views/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="login">
-      <form action="/login" method="POST">
+      <form :action="`${this.instance}/login`" method="POST">
         <div class="logo"><Logo /></div>
         <BaseInput name="username" placeholder="Login" type="text" />
         <BaseInput name="password" placeholder="Password" type="password" />
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { instance } from "@/actions/config.js";
 import Logo from "@/components/logos/Logo.vue";
 import BaseInput from "@/components/forms/BaseInput.vue";
 import Button from "@/components/buttons/Button.vue";
@@ -22,7 +23,12 @@ export default {
     Logo,
     BaseInput,
     Button
-  }
+  },
+  data() {
+    return {
+      instance: instance
+    };
+  },
 };
 </script>
 

vue.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   lintOnSave: false,
   productionSourceMap: false,
-  outputDir: "dist/files"
+  outputDir: "dist/files",
+  publicPath: ''
 };