Just run vue_frontend but nothing show.

[625781186]

after npm run build and python manage.py runserver ,
It's ok.

But , just run npm run serve ,

I comment this line , but browser nothing show.

[625781186]

I think this is a problem with some nodejs libraries, but I don't know how to solve it.
Is it possible to provide a runnable Docker environment?

[625781186]

I use create new vue app , it's ok ,
after, I npm install --save moment vuex vuex-persistedstate webpack-bundle-tracker ,
It's error.

[625781186]

I delete vue.config.js file ,
It's ok.

But ,
'http://localhost:8080'
or
http://localhost:8080/vue_app_01
or
http://localhost:8080/vue_app_02 ,

they are both 'http://localhost:8080'.

[625781186]

I comment vue.config.js pages can run.
But it's not a multi-page project.

[625781186]

I test this repo (https://github.com/liuyunzhuge/vue-multi-page-demo) is ok ,
but test your project is failed.

[625781186]

I think maybe this error .
I comment this line , it's ok.

Finally, I've changed my code to look like this, and it's ready to run.

vue.config.js

const BundleTracker = require("webpack-bundle-tracker");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

const createPage = (name, title, chunk = '')=>{
    return {
      entry: `src/pages/${name}/main.js`,
      template: 'public/index.html',
      filename: `${name}.html`,
      title,
      chunks: ['chunk-vendors', 'chunk-common', chunk || name]
    }
}


// const pages = {
//     "stopwatch": {
//         entry: "./src/stopwatch.js",
//         chunks: ["chunk-moment", "chunk-vendors"],
//     },
//     "index": {
//         entry: "./src/index.js",
//               template: 'public/index.html',
//               filename:'index.html',
//         chunks: ["chunk-vendors"],
//     },
//     'vue_app_01': {
//         entry: './src/main.js',
//               template: 'public/index.html',
//                       filename:'vue_app_01.html',
//         chunks: ['chunk-vendors']
//     },
//     'vue_app_02': {
//         entry: './src/newhampshir.js',
//               template: 'public/index.html',
//                       filename:'vue_app_02.html',
//         chunks: ['chunk-vendors']
//     },
// }

let pages = {
        index: createPage('index', 'Index'),
        about: createPage('about', 'About Me'),
    }

module.exports = {
    
    pages: pages,
    
    filenameHashing: false,
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production'
        ? 'static/vue'
        : 'http://localhost:8080/',
    outputDir: '../django_vue_mpa/static/vue/',

    chainWebpack: config => {

        config.optimization
            .splitChunks({
                cacheGroups: {
                    moment: {
                        test: /[\\/]node_modules[\\/]moment/,
                        name: "chunk-moment",
                        chunks: "all",
                        priority: 5
                    },
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "chunk-vendors",
                        chunks: "all",
                        priority: 1
                    },
                },
            });

        Object.keys(pages).forEach(page => {
        //     config.plugins.delete(`html-${page}`);
           config.plugins.delete(`preload-${page}`);
           config.plugins.delete(`prefetch-${page}`);
        })

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../vue_frontend/webpack-stats.json'}]);

        // Uncomment below to analyze bundle sizes
        // config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin);
        
        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://localhost:8080')
            .host('localhost')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["*"]})

    }
};