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]

https://github.com/vuejs/vue-cli/blob/ef548a7eca1884ad9db9d22a7dab0e540fd2b3a1/packages/%40vue/cli-service/lib/commands/build/resolveLibConfig.js#L114-L133 https://github.com/vuejs/vue-cli/blob/ef548a7eca1884ad9db9d22a7dab0e540fd2b3a1/packages/%40vue/cli-service/lib/commands/build/setPublicPath.js#L1-L15

[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: https://github.com/vuejs/vue-cli/blob/ef548a7eca1884ad9db9d22a7dab0e540fd2b3a1/packages/%40vue/cli-service/lib/commands/build/resolveLibConfig.js#L114-L133 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.