The builder prepend '/' on publicPath when using custom protocol publicPath

[KarlBao]

Version

3.8.4

Environment info

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Node: 9.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-service: ^3.8.0 => 3.8.4
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2 (4.7.1)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    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: Not Found

Steps to reproduce

// vue.config.js
module.exports = {
  publicPath: 'customprotocol://www.my-app.com/'
}

What is expected?

<link href=customprotocol://www.my-app.com/js/app.3a07a650.js rel=preload as=script>

What is actually happening?

<link href=/customprotocol://www.my-app.com/js/app.3a07a650.js rel=preload as=script>

---

In our APP, we will intercept the assets with customprotocol and get them from local cache. Please provide an option to allow using publicPath not starting with https?.

[KarlBao]

vue-cli/packages/@vue/cli-service/lib/Service.js

Line 366 in 76e7c38

ensureSlash(resolved, 'publicPath')

Hope can add an option to prevent calling this ensureSlash function.

[JRliu]

my protocol is widget:// and i fix it in plugin:

configureWebpack: {
        plugins: [
             {
                apply: compiler => {
                    compiler.plugin('compilation', compilation => {
                        compilation.plugin(
                            'html-webpack-plugin-after-html-processing',
                            htmlPluginData => {
                                htmlPluginData.html = htmlPluginData.html.replace(
                                    /\/widget:\/\//g,
                                    'widget://'
                                )
                                return htmlPluginData
                            }
                        )
                    })
                }
            }
        ]

[mango-csl]

my protocol is widget:// and i fix it in plugin:

configureWebpack: {
        plugins: [
             {
                apply: compiler => {
                    compiler.plugin('compilation', compilation => {
                        compilation.plugin(
                            'html-webpack-plugin-after-html-processing',
                            htmlPluginData => {
                                htmlPluginData.html = htmlPluginData.html.replace(
                                    /\/widget:\/\//g,
                                    'widget://'
                                )
                                return htmlPluginData
                            }
                        )
                    })
                }
            }
        ]

的确是个可行的办法，但前提是没有使用Lazy Loading Routes。
截图中的 u.p is publicPath

期待后续vue cli能考虑这种情况

[KarlBao]

My workaround is using setter and getter to intercept the change:

/**
 * vue.config.js
 */
const config = {
  publicPath: 'customprotocol://www.my-app.com/'
}

// prevent the change of publicPath starting with '/'
Object.defineProperty(config, 'publicPath', {
  set: function (val) {
    if (/^\/[^\/].+/.test(val)) {
      val = val.replace('/', '')
    }
    _publicPath = val
  },
  get: function () {
    return _publicPath
  }
})

module.exports = config