Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
KarlBao opened this issue Jun 21, 2019 · 4 comments · Fixed by #4816
Closed

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

KarlBao opened this issue Jun 21, 2019 · 4 comments · Fixed by #4816

Comments

@KarlBao
Copy link

KarlBao commented Jun 21, 2019

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
Copy link
Author

KarlBao commented Jun 21, 2019

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
Copy link

JRliu commented Jun 28, 2019

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
Copy link

mango-csl commented Jul 29, 2019 •
edited
Loading

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
image

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

@KarlBao
Copy link
Author

KarlBao commented Aug 2, 2019 •
edited
Loading

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

haoqunjiang added a commit to haoqunjiang/vue-cli that referenced this issue Nov 8, 2019
@haoqunjiang
fix: don't prepend publicPath with slash
cd95fbf 
fixes vuejs#3338
fixes vuejs#4184

Actually I don't know why the slash was added in the first place, seems
extraneous to me.
@haoqunjiang haoqunjiang mentioned this issue Nov 8, 2019
Merged
9 tasks
haoqunjiang added a commit that referenced this issue Nov 9, 2019
@haoqunjiang
fix: don't prepend publicPath with slash (#4816)
6325793 
fixes #3338
fixes #4184

Actually I don't know why the slash was added in the first place, seems
extraneous to me.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: don't prepend publicPath with slash haoqunjiang/vue-cli
3 participants
@KarlBao @JRliu @mango-csl