PublicPath in vue.config.js ignored for build target lib

[abargstaedt]

Version

4.1.1

Reproduction link

https://github.com/abargstaedt/poc-module-vue-cli

Environment info

  System:
    OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v3 @ 3.50GHz
  Binaries:
    Node: 12.13.0 - /usr/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.13.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.1.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.1.1 
    @vue/cli-plugin-babel: ^4.1.1 => 4.1.1 
    @vue/cli-plugin-eslint: ^4.1.1 => 4.1.1 
    @vue/cli-plugin-router:  4.1.1 
    @vue/cli-plugin-vuex:  4.1.1 
    @vue/cli-service: ^4.1.1 => 4.1.1 
    @vue/cli-shared-utils:  4.1.1 
    @vue/component-compiler-utils:  3.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.1.1

Steps to reproduce

npm install
npm run build

What is expected?

Logo PNG should be referenced to "//localhost:4003/img/logo.82b9c7a5.png"

What is actually happening?

Logo PNG is referenced to "img/logo.82b9c7a5.png"

---

We're aiming to host AMD/UMD modules on our web-space with the ability to load assets from the same location.

[lq111lq]

vue-cli/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js

Lines 114 to 133 in ef548a7

	rawConfig.output = Object.assign({
	library: libName,
	libraryExport: isVueEntry ? 'default' : undefined,
	libraryTarget: format,
	// preserve UDM header from webpack 3 until webpack provides either
	// libraryTarget: 'esm' or target: 'universal'
	// https://github.com/webpack/webpack/issues/6522
	// https://github.com/webpack/webpack/issues/6525
	globalObject: `(typeof self !== 'undefined' ? self : this)`
	}, rawConfig.output, {
	filename: `${entryName}.js`,
	chunkFilename: `${entryName}.[name].js`,
	// use dynamic publicPath so this can be deployed anywhere
	// the actual path will be determined at runtime by checking
	// document.currentScript.src.
	publicPath: ''
	})
	return rawConfig
	}

vue-cli/packages/@vue/cli-service/lib/commands/build/setPublicPath.js

Lines 1 to 15 in ef548a7

	// This file is imported into lib/wc client bundles.
	if (typeof window !== 'undefined') {
	if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {
	require('current-script-polyfill')
	}
	var i
	if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
	__webpack_public_path__ = i[1] // eslint-disable-line
	}
	}
	// Indicate to webpack that this file can be concatenated
	export default null

[lq111lq]

const path = require('path')
const ASSET_PATH = '//localhost:4003/';

function PublicPathWebpackPlugin () {}

PublicPathWebpackPlugin.prototype.apply = function (compiler) {
  compiler.hooks.entryOption.tap('PublicPathWebpackPlugin', (context, entry) => {
    if (entry['module.common']) {
      entry['module.common'] = path.resolve(__dirname, './src/main.js')
    }
    if (entry['module.umd']) {
      entry['module.umd'] = path.resolve(__dirname, './src/main.js')
    }
    if  (entry['module.umd.min']) {
      entry['module.umd.min'] = path.resolve(__dirname, './src/main.js')
    }
  });
  compiler.hooks.beforeRun.tap('PublicPathWebpackPlugin', (compiler) => {
    compiler.options.output.publicPath = ASSET_PATH
  })
}

module.exports = {
  publicPath: ASSET_PATH,
  configureWebpack (config) {
    config.plugins.unshift(new PublicPathWebpackPlugin())
  }
};

[darrin]

I was also having this problem when building a lib. I've confirmed that @lq111lq's plugin does work to inject this the public path as expected.

Thanks @lq111lq!

[noook]

Even though publicPath is ignored, using the property output.publicPath from webpack config throws an error because this is forbidden.

[folmert]

publicPath is not ignored, but rather overwritten in lines mentioned by lq111lq:

vue-cli/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js

Lines 114 to 133 in ef548a7

	rawConfig.output = Object.assign({
	library: libName,
	libraryExport: isVueEntry ? 'default' : undefined,
	libraryTarget: format,
	// preserve UDM header from webpack 3 until webpack provides either
	// libraryTarget: 'esm' or target: 'universal'
	// https://github.com/webpack/webpack/issues/6522
	// https://github.com/webpack/webpack/issues/6525
	globalObject: `(typeof self !== 'undefined' ? self : this)`
	}, rawConfig.output, {
	filename: `${entryName}.js`,
	chunkFilename: `${entryName}.[name].js`,
	// use dynamic publicPath so this can be deployed anywhere
	// the actual path will be determined at runtime by checking
	// document.currentScript.src.
	publicPath: ''
	})
	return rawConfig
	}

It's a shame it hasn't been resolved after 4 years. It should be still possible to set publicPath for libs, if someone wants to.