CODEWITHSUNDEEP
vue.jsbuildvue-clivue-cli-3
cc2696451
cc2696451

Reputation: 41

@vue/cli build dist/ folder doesn't render when hosted as a sub-directory

I am making a simple 2 page website with @vue/cli / vue version 3.5.5.

So far so good, when i run the website locally with npm run serve and then create my dist/ folder with npm run build .

When I add the files from the dist/ folder to the root of my hosting and access the production environment on http://www.my-website.com the page renders and runs normally.

However I want to host the app in the sub-directory but this messes up the routes as the index.html doesn't render. When accessing http://www.my-website.com/dist : the index.html is returned blank and with error messages in the console: 

app.a1183de6.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

chunk-vendors.ff22d1fb.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

about.ad763791.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

app.a1183de6.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Provide background including what you've already tried

I've spent hours and hours searching and the most common thing is to create a vue.config.js file and to change the root path into a sub-directory instead

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/dist/'
    : '/'
}

I also tried this but it doesn't work: 

// module.exports = {
// publicPath:' /dist/ '
// }

I put the vue.config.js file at the root of the project folder as indicated but it seems to be ignored on npm run build

Describe the expected and actual results:

I would like to render my vue-app in a sub-directory such as :

http://www.website.com/dist

But right now, i get a blank index.html page and error messages in the console when i host my project in a sub-directory. the project runs fine if i host it in the root

Upvotes: 2

Views: 4471

Answers (2)

Alejandro Lasebnik
Alejandro Lasebnik

Reputation: 874

This error can occur even if you are not creating a specific folder under the distribution folder. In that case see the following solution:

By default, index.html is generated with the link tags like the following:

<link href=/js/chunk-vendors.2f2d9c51.js rel=preload as=script>

Adding an unneeded slash at the beginning so its trying to search for the js and css files in the wrong path. You actually need it like the following:

<link href=js/chunk-vendors.2f2d9c51.js rel=preload as=script>

without the leading slash character.

The leading forward slash '/' means the path is absolute to the root directory and not the current directory.

In order to fix it just add a vue.config.js file to your vue project containing the following code:

module.exports = {
    publicPath: ''
};

It will assure that the index.html will be generated as shown above.

Upvotes: 2

cc2696451
cc2696451

Reputation: 41

nvm... it's working now ....

Created in root of project: vue.config.js

Added the following:

module.exports = {
  publicPath: '/dist/'
}

After running npm run build the paths to the js and css files now include the sub-directory

Upvotes: 2

Related Questions