Vue-cli 3 and multiple entry points (pages)

UPD.1: I found reference for multiple pages in the vue-cli source code. I think it's not yet documented. UPD.2: See config documentation for create multiple pages.

---

For example we need build two different app instances:

• index - /;
• dashboard - /manage.

Simple way add pages config reference to vue.config.js.

Full config you can see here.

Old example using webpack-chain is here.

Configure vue.config.js

With pages api you don't need manually edit entry points. You just define each your page like this:

module.exports = {
  pages: {
    manage: {
      entry: 'src/dashboard/main.js',
      template: 'public/index.html',
      filename: 'dashboard/index.html',
      title: 'Dashboard Page',
      chunks: ['chunk-vendors', 'chunk-common', 'dashboard']
    }
}

Vue router

Using vue router you will see error, for fix configure historyApiFallback for webpack-dev-server:

devServer: {
    historyApiFallback: {
        rewrites: [
            { from: /^\/manage\/?.*/, to: path.posix.join('/', 'manage/index.html') },
            { from: /./, to: path.posix.join('/', 'index.html') }
        ]
    },
}

Configure Nginx

For more, if you need configure nginx you can make something like this:

server {
    listen 80;

    location ~ ^/manage(.*)$ {
        proxy_pass http://127.0.0.1:8550/manage/$1;
    }
}

Best way if on a each entry point configure own location. See full config here.

Using non "localhost" host HMR can not be working. And for it add allowedHosts to webpack-dev-server or edit server headers.