Vue-cli: URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico'

[almokhtarbr]

Version

3.0.1

Node and OS info

node : v10.8.0 / npm : 6.2.0

Steps to reproduce

☁ vue vue create app1
☁ vue cd app1
☁ npm run serve

What is expected?

App running at:
Local: http://localhost:8080/

What is actually happening?

App running at:

• Local: http://localhost:8080/

URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico'
at decodeURIComponent ()
at decode_param (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:574:18)
at next (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:220:15)
at expressInit (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:317:13)
at /Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:335:12)
at next (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:275:10)
at query (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/middleware/query.js:45:5)
at Layer.handle [as handle_request] (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:317:13)
at /Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Volumes/HHD/#dev/vue/app1/node_modules/express/lib/router/index.js:335:12)

[sodatea]

It’s due to the # in your project path.

[almokhtarbr]

@sodatea what that mean ? because i'm newbie in vue

[sodatea]

@almokhtarbr Currently @vue/cli has a bug when the project path contains a /# (/#dev in your case).
I'm not yet sure where the bug came from. Since I found a similar bug in create-react-app when the project path contains %20, I guess it may be an upstream issue in some webpack plugin.

For now, to solve this issue, just create your project somewhere else.

[almokhtarbr]

@sodatea aah ok thank you .

[hello2parth]

+1
I have a similar issue. Don't know the root cause of the same.

[2xAA]

The same thing here. With Azure Repos, any project with a "space" character in the title generates a "%20" in the folder name when cloning. This breaks vue-cli.

[tarazena]

Azure Repos was the issue for my, my folder path had %20 instead of spaces and Vue CLI was going crazy when it tries to render the page

[seminelee]

同样的问题。版本 @[email protected]。最后发现是vue.config.js里的pages的filename的配置问题。改成这样就可以了

module.exports = {
  pages: {
    index: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: process.env.NODE_ENV === 'production' ? 'build/path/index.html' : 'index.html', // 开发环境需要填index.html才能找到路径
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // ...
  }
}

[gprl]

This issue happens to me. The reason being the url is malformed:
/%3C%=%20BASE_URL%20%%3Efavicon.ico cannot be decoded since the percentages(%) were not encoded, proper encoding would be /%3C%26=%20BASE_URL%20%26%3Efavicon.ico

It happens because the publicPath or baseUrl is set to something other than an empty string and we try to access the page at say http://localhost:8080/ instead of http://localhost:8080/

Don't know if there is a way to fix it, but the bright side is that it seems to only happen in development builds, since webpack would parse <% BASE_URL %>favicon.ico for production with our configured publicPath or baseURL

[dedoyle]

同样的问题。版本 @[email protected]。最后发现是vue.config.js里的pages的filename的配置问题。改成这样就可以了

module.exports = {
  pages: {
    index: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: process.env.NODE_ENV === 'production' ? 'build/path/index.html' : 'index.html', // 开发环境需要填index.html才能找到路径
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // ...
  }
}

我也是多入口，分多个目录，development 模式 filename 是 /index.html，所以开发环境报错。production filename 是 index.html 所以能替换成功。没有办法解决吗