vue-cli 3.0 multi page setup with HTML5 history mode

Question

vue-cli 3.0 provides a pages config to configure multi page mode.

https://cli.vuejs.org/config/#pages

I'm currently trying to get the dev server working with HTML5 history mode, but with no luck so far.

Has anyone already tried this feature and got a working example?

Stria

Answer 1

You need to add configuration of devserver to vue.config.js.
By specifying rewrite for historyApiFallback, that problem is solved.

e.g. Implement multiple pages as index page and signin page

vue.config.js:

module.exports = {
  pages: {
    index: {
      entry: 'src/entry-point/index/main.js', //entry for the public page
      template: 'public/index.html', // source template
      filename: 'index.html' // output as dist/*
    },
    signin: {
      entry: 'src/entry-point/signin/main.js',
      template: 'public/signin.html',
      filename: 'signin.html'
    }
  },
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /\/index/, to: '/index.html' },
        { from: /\/signin/, to: '/signin.html' }
      ]
    }
  }
}

In order to apply the above setting you need to run vue inspect, please be careful.

Also, be careful when baseUrl is specified. The following is stated in the document.

Some values like publicPath and historyApiFallback should not be modified as they need to be synchronized with baseUrl for the dev server to function properly.

So, in such a case, set a base tag to the template.

<base href="/appname/">

Since this is the configuration of the environment for development, please specify the redirect in the setting of hosting in the production environment.

Ehf

Are you able to provide an example of how you would set this up for production? I've tried using the rewrites option of the 'connect-hostory-api-fallback' package but the assets (js and css) are not found when the page is redirected – Zabrina