How to access other pages in a multiple pages configuration with vue.js?

Question

I was following this post: multiple pages in Vue.js CLI

I'm happy to have multiple pages now... But, how can I access it ? From the URL : http://localhost:8080/, I can set everything I want at the end, but it keep showing me the same page.

Here is my vue.config.js :

module.exports = {
    lintOnSave: false,
    pages: {
        index: {
            entry: './src/pages/Index.js',
            template: './public/index.html',
            filename: 'index.html',
            title: 'Accueil',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'index'
            ]
        },
        test: {
            entry: './src/pages/Test.js',
            template: './public/index.html',
            filename: 'index.html',
            title: 'Test Page',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'index'
            ]
        }
    }
};

I reloaded the server, there is no error, everything looks fine. I think I just missed something somewhere.

Answer 1

I figured out the problem, here is the correct solution :

module.exports = {
    lintOnSave: false,
    pages: {
        index: {
            entry: './src/pages/Index.js',
            template: './public/index.html',
            filename: 'index.html',
            title: 'Accueil',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'index'
            ]
        },
        sample: {
            entry: './src/pages/Sample.js',
            template: './public/index.html',
            filename: 'sample.html',
            title: 'Sample page',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'sample'
            ]
        }
    }
};

I was naming pages with the same "filename" value. Then, "chunks" must contains the name of the page (i guess) but now it works !