Npm run build generates wrong paths

Question

To deploy my Vue Cli 3 project I did npm run build, however index.html in the new dist/ folder contains wrong paths like this:

<link href=/css/app.35dee36a.css
<link href=/js/app.826dde09.js

as a result I get those in the console:

Failed to load resource - http://my_site.com/js/app.826dde09.js

It should be http://my_site.com/timelog/js, not http://my_site.com/js.

I tried to specify URLs in package.json by adding "baseUrl": "http://my_site.com/timelog/", "homepage": "http://my_site.com/timelog/", but it doesn't change anything.

What is causing this problem and how to solve it?

Grilled

The built version is supposed to be run on a webserver with an actual domain name. – Bridgeman

I have a cheap shared hosting package, I don't think I can run something like that on their server. Are you sure this is the issue and there's no workaround? – Grilled

If you want to develop, run npm run serve and go to localhost:8080 or whatever the port is that it runs on. npm run build is a production build and does not work if you open index.html through a file:/// link. As long as you have ftp or sftp access to your server, and have any domain name, you should be able to transfer anything in the dist folder to the folder that serves as your public_html folder. That would allow you to either access yourdomain.com/index.html or yourdomain.com if any rewriting is enabled. – Bridgeman

Thanks, you're correct, however the paths are still wrong. I edited the question. – Grilled

Answer 1

I solve this by creating a vue.config.js file at the root of my project with the following content:

module.exports = {
  baseUrl: '/timelog/'
}

(to make internal links work as well see this answer)

Grilled

It seems that baseUrl has been replaced by publicPath. This answer helped me anyway, thank You. – Hysell

baseUrl has been deprecated and replaced by publicPath. if you use baseUrl you may have ERROR – Underpart