Webpack chunks not using correct publicPath

[adiliqbl]

I am using dynamic imports for lazy loading Vue routes. On development, everything works but dynamic imports break in build and relative paths are used for chunks instead of absolute paths.

Adding __webpack_public_path__ = '/' on top of main.js, fixed vue routing (opening routes from main page). But when some page /users/all is opened directly, the chunk files are fetched from wrong url. I have also tried adding webpack-require-from plugin, but didn't help in my case.

Expect Url for chunks: website.com/dist/js/[name].[chunkhash].js
Webpack appends like this:
website.com/users/dist/js/[name].[chunkhash].js
website.com/users/userid/profile/dist/js/[name].[chunkhash].js
website.com/users/dist/css/[name].[chunkhash].js

webpack.base.conf.js

entry: { app: ['@babel/polyfill', './src/main.js'] },
output: {
    path: path.resolve(__dirname, `../`),
    filename: isProduction ? '[name].[chunkhash].js' : '[name].js',
    chunkFilename: isProduction ? '[name].[chunkhash].js' : '[name].js',
    publicPath: './'
},
module: {
    rules: [{
        test: /\.(js|ts)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
        include: [resolve('src'), resolve('test')],
        options: {
            plugins: ['lodash'],
            presets: [['@babel/preset-env', { modules: false, targets: { node: 4 } }]]
        }
    }]
}

webpack.prod.conf.js

module: {
    rules: utils.styleLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true
    })
},
output: {
    path: path.resolve(__dirname, `../`),
    publicPath: './',
    filename: utils.assetsPath('/js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('/js/[id].[chunkhash].js')
},
plugins: [
    new webpack.HashedModuleIdsPlugin({
        hashFunction: 'sha256',
        hashDigest: 'hex',
        hashDigestLength: 20
    }),
    new WebpackChunkHash({ algorithm: 'md5' }),
    new MiniCssExtractPlugin({
        filename: utils.assetsPath('/css/[name].[chunkhash].css'),
        chunkFilename: utils.assetsPath('/css/[id].[chunkhash].css')
    }),
    new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, `../dist/index.html`),
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
            removeAttributeQuotes: true,
            removeRedundantAttributes: true,
            minifyCSS: true
        }
    })
]

[pratirupm]

did you find a solution ??

[adiliqbl]

No. I went with vue-cli 3

[jhfoo]

No. I went with vue-cli 3

How did vue-cli 3 solve the problem? I'm using 4.5.9 and the problem persists.