Vue-cli: provide baseUrl for development mode

Created on 10 Apr 2018 · 5Comments · Source: vuejs/vue-cli

What problem does this feature solve?

baseUrl in vue.config.js now only works in production mode.
In my case, I need to load the page as an iframe.

something like

<!-- http://localhost/ -->
<body>
<iframe src="http://localhost/myframe/"></iframe>
</body>

But it turns out http://localhost/myframe/ will load app.js from http://localhost/ which is not right.

PS. I need to inject some data into iframe, so it needed to be run in development mode for debugging

What does the proposed API look like?

maybe a devBaseUrl

module.exports = {
  baseUrl: '/myframe/', // this works in production mode
  devBaseUrl: '/myframe/' // this works in development mode
}

feature request next cli-service serve

Source

troy351

👍5

Most helpful comment

@duduluu you may misunderstood my question.
the problem is that embed spa getting its app.js from main spa for there is a / before it.
So the embed spa won't render correctly.

The main spa finding embed spa thing works fine with nginx

troy351 on 16 Apr 2018

👍3

All 5 comments

Not sure your frame is a static page or vue app.

If it's a static page, you could set dev server in vue.config.js like this:

const express = require('express');

module.exports = {
  devServer: {
    proxy: null, // string | Object
    before: app => {
      // the app is the instance of the express app
      app.use('/myframe', express.static('path/to/myframe'));
    },
  },
};

If vue app, set the base for vue router in router.js, Vue router documents base

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: '/myframe/',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

duduluu on 13 Apr 2018

👍1

@duduluu
both localhost and localhost/myframe are vue apps, and they are developed separately (not the same SPA)

troy351 on 13 Apr 2018

You might use dev server proxy. See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

localhost:8080 for your main spa, localhost:8081 for your embed spa.

Set the vue.config.js of your main project, and cli-service serve both spa.

module.exports = {
  devServer: {
    proxy: {
      '/myframe': {
        target: 'localhost:8081',
      },
    }
  }
}

duduluu on 14 Apr 2018

@duduluu you may misunderstood my question.
the problem is that embed spa getting its app.js from main spa for there is a / before it.
So the embed spa won't render correctly.

The main spa finding embed spa thing works fine with nginx

troy351 on 16 Apr 2018

👍3

This is a really basic fix, would be nice to have @Akryum fix released