Webpack: npm run build asset path incorrect

Created on 24 Jan 2018  路  9Comments  路  Source: vuejs-templates/webpack

webpack template static path on build prod should be fixed... all the assets are currently build as src=static/js/..... which on windows os or xampp apache is undefined path unless i change all to ./static/js/ ....

root path : http://localhost/prodbuild/

static path on npm run build : static/[js/css]/....

in which the browser is assuming the assets are on http://localhost/static/[js/css/]/... instead of http://localhost/prodbuild/static/[js/css]/...

thanks

bug help wanted

Most helpful comment

Try chaging this line:

https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js#L79

to this:

name: NODE_ENV === 'production'
  ? utils.assetsPath('../../fonts/[name].[hash:7].[ext]')
  : utils.assetsPath('fonts/[name].[hash:7].[ext]')

All 9 comments

I'm not 100% sure I understand your issue, but;

in which the browser is assuming the assets are on http://localhost/static/[js/css/]/... instead of http://localhost/prodbuild/static/[js/css]/...

that's the expoected behaviour if you leave the default setting for the assetsPublicPath`in/config/index.jsas it is:/`.

It's an absolute path, and this behaviour is intended - it's required for vue-router to work correctly in history mode.

You can change the assetsPublicPath under the build: key to something else, e.g. /prodbuild/, or ./ to make it work in your scenario.

assetsPublicPath = '' fixed my problem but what about importing font awesome using this import statement and running npm run build

import './assets/font-awesome-4.7.0/css/font-awesome.css'

final output
ERROR FROM CHROME
GET http://localhost/prodvuejs/static/css/static/fonts/fontawesome-webfont.af7ae50.woff2 net::ERR_ABORTED

no idea why static is repeating ? it should be justhttp://localhost/prodvuejs/static/fonts/fontawesome...

Hm, In guess the hardcoded import for the font in fontawesome is messing something up.

Won'T have much time to look into this in the coming days, sorry.

Try chaging this line:

https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js#L79

to this:

name: NODE_ENV === 'production'
  ? utils.assetsPath('../../fonts/[name].[hash:7].[ext]')
  : utils.assetsPath('fonts/[name].[hash:7].[ext]')

@LinusBorg How can we do this with latest Vue (vue-cli 3)?

You don't have to, it should work.

Ask question on forum.vuejs.org please.

@LinusBorg it does not work.

generatedindex.html file has absolute paths to js and css.
I need them relative as I'm using domain with path for this app (https://somedoman.com//).

Ask question on forum.vuejs.org please.

Was this page helpful?
0 / 5 - 0 ratings