Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

provide baseUrl for development mode #1102

Closed
troy351 opened this issue Apr 10, 2018 · 5 comments
Closed

provide baseUrl for development mode #1102

troy351 opened this issue Apr 10, 2018 · 5 comments

Comments

@troy351
Copy link
Contributor

troy351 commented Apr 10, 2018

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
}
@duduluu
Copy link

duduluu commented Apr 13, 2018

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,
    },
  ],
});

@troy351
Copy link
Contributor Author

troy351 commented Apr 13, 2018

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

@duduluu
Copy link

duduluu commented Apr 14, 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',
      },
    }
  }
}

@troy351
Copy link
Contributor Author

troy351 commented Apr 16, 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

@fnoop
Copy link

fnoop commented May 18, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants