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.