webpack reload for SPA with vue.. `Cannot GET /last_SPA_path` can we redirect all "requests" to `/` where vue app exists?

[alex-a-pereira]

• Version: "^2.7.4"

• Target: N/A, not just developing right now..

  I'm building a vue "SPA" using electron-webpack. So far experience has been great, however in development when I hot-reload the module I get a redirect to the page (e.g. /login the I was previously on, to which the webpack dev server responds with Cannot GET /login.

To my understanding, this is caused by dev-server reloading attempting to navigate to /login before the vue app loads and understands that vue-router is supposed to handle the routing.

Simple fix (or so it seemed) that works for my case would be to force webpack-dev-server to redirect back to the root URL, where the vue app is hosted. Looking at docs, there seem to be a couple configurable options like module.hot but it's not clear hot I can tie this into the electron-webpack module.

this seems like it could be a pretty common occurrence for electron-webpack users and I'm happy to to make a PR adding documentation on this case when I find something that works.

Thanks guys and gals!

[alex-a-pereira]

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
};

relevant from main/index.js

app.on('ready', () => {
  let window = new BrowserWindow({
    width: 600,
    height: 460,
    resizable: false,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  });
  if(isDevelopment) {
    console.log('YESSSSSS');
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
  } else {
    window.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
    }));
  }
  window.on('closed', () => {
    window = null;
  });
});

[alex-a-pereira]

another note, seems like hot reloading on anything in the main process will properly hot reload. it looks like whenever I try to reload the render processes, the main processes won't reload as well to re-render the vue app