Website not built properly after running 'nuxt generate'

[rockcs1992]

Hi guys, first of all let me say thanks for the amazing framework!
I'm building a personal website with nuxtJS these days. I have finished the development work however when I run nuxt generate and host the dist folder on my server, the website is not complete and something is different from how it looks in development mode.

I have four pages in the site, and I put all of the images under /static/img folder. When I host the dist folder, it is trying to search image under /{pagename}/img folder for each page, which is causing the images to break.Must I separate the images based on what page they belong to?

Also, it seems that the files are not loaded correctly. The screenshot below is the first load of the site

Any ideas?

P.S. Url for the project: https://github.com/rockcs1992/Personal-Website

_{This question is available on Nuxt.js community (#c2292)}

[limichange]

Which dist do you host ? project/dist or project/.nuxt/dist ?

[rockcs1992]

I'm hosting project/dist

…

On Jan 19, 2018 3:30 AM, "Limichange" ***@***.***> wrote: which dist do you host ? project/dist or project/.nuxt/dist ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2636 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQA7ZLpK4mwQxZ66eA0dX-dQQjosErk8ks5tMFKsgaJpZM4Rj9wF> .

[limichange]

Which version of nuxtjs are you using?

[rockcs1992]

It's 1.0.0

…

--------------------- Shi Cheng Georgia Institute of Technology [2017] chengshi1219@gmail.com 470-435-9593 2018-01-19 8:21 GMT-05:00 Limichange <notifications@github.com>:

Which version of nuxtjs are you using? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2636 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQA7ZAU1vWTI37Z56seKkjKtSwx5y1TAks5tMJa9gaJpZM4Rj9wF> .

[limichange]

This project?
https://github.com/rockcs1992/Personal-Website

[rockcs1992]

Correct. I just updated it to the latest. Is there anything wrong with my file structure?

…

--------------------- Shi Cheng Georgia Institute of Technology [2017] chengshi1219@gmail.com 470-435-9593 2018-01-19 8:26 GMT-05:00 Limichange <notifications@github.com>:

This project? https://github.com/rockcs1992/Personal-Website — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2636 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQA7ZBNfYS_tqFZQP8VgATWF74wrRq1Cks5tMJgWgaJpZM4Rj9wF> .

[Zurnaz]

The router base in the nuxt.config.js makes everything point to root when generating static content.

Changing it to either './' or /Portfolio/ (In your case) should fix it but breaks the npm run dev
UPDATE: don't use "base: ./" it breaks Javascript with no errors

Documentation here
https://nuxtjs.org/faq/github-pages

I'm debugging a separate issue but this fixed it for both cases allowing me to use "npm run dev" and "npm run generate" properly

You will need to update the nuxt.config.js router base and package.json generate script sections.
https://github.com/Zurnaz/nuxt-example/blob/master/nuxt.config.js
https://github.com/Zurnaz/nuxt-example/blob/master/package.json

[rockcs1992]

@Zurnaz Thanks for your reply. I changed the router settings and the 'generate' script, but it doesn't seem to solve my problem. All the pages except for the homepage have a problem finding correct file path. Like the pic shows below.

I have uploaded the dist folder to the repo. Please have a look at your convenience. Thanks!

[limichange]

@rockcs1992
Interesting issue. I think github can't expore _nuxt floder. You need to config publicPath and router.base.

This is demo: https://limichange.github.io/Personal-Website/ and this is code https://github.com/limichange/Personal-Website.

Some error i have fixed, you can look code.

[limichange]

🤔 Maybe i should to update the nuxtjs document.

[rockcs1992]

@limichange Thanks so much helping me with this! Yeah I think the document might need to be clearer, especially to people who are not familiar with webpack. (like me)
BTW with your approach, there is a weird problem for my site. Say I'm on home page and click on portfolio nav link, the pictures on portfolio page is loaded but will not show up until I refresh the page. Do you have any clue what might be the reason?

[limichange]

If you direct go to the page, browser get the html file, jquery plugin is fine, because image has load. But if you go to the page by click link, webpage update by loading js file, not html file. The jquery plugin has ran before you click link, jquery plugin can't find images, so you need to run it again.

Run it at Portfolio.vue again.

$('.works').mixItUp();

limichange/Personal-Website@5aa350e

😅 my english isn't great, can you understand it?

[rockcs1992]

@limichange I totally understand it. Thanks for your time and efforts!
BTW I just tried to deploy to github manually, and yes github cannot recognize _nuxt folder for some reason. And I think that should definitely be pointed out in documentation

[NicoPennec]

@rockcs1992 @limichange

On GitHub Pages, you have to keep the .nojekyll file generated by npm run generate in dist folder.

I don't see this file in your project : https://github.com/rockcs1992/rockcs1992.github.io

Add .nojekyll file to let Github Pages add the _nuxt/ folder
https://help.github.com/articles/files-that-start-with-an-underscore-are-missing/

https://github.com/nuxt/nuxt.js/blob/7d960b03f72e81aa72ca7569ba0154426c198bfb/lib/builder/generator.js#L176-L179

[limichange]

@NicoPennec @rockcs1992 I know it now. Becase gh-pages don't upload .nojekyll. It isn't matter of nuxtjs.

[NicoPennec]

@limichange

I have tried with the @rockcs1992'project, it works fine on npm run generate

The issue come from npm run deploy script : https://github.com/rockcs1992/Personal-Website/blob/master/package.json#L14

Retry with this dotfiles flag:

"deploy": "gh-pages --dist --dotfiles=true"

[ilhamwahabi]

How to fix this if using push-dir? I'm encountered this issue too.

Edit: I'm sorry, looks like the problem from nuxt generate that not run properly so its affect when I deploy it to github.

[limichange]

@IlhamWahabiGX You mean push-dir ignore .nojekyll file?

[ilhamwahabi]

@limichange nope, I mean same error when this issue created.

Its error both in my local and when I'm deploy it to github pages.

Looks like its wrong import when do generate. When i change the index.html (from dist folder after npm run generate) from ...href="/favicon" to ...href="favicon" its fixed issue for favicon but not for other. Its inconvenience if i must change each one after generate.

But I don't know which part of nuxt.config.js to modify.

NuxtJS version : 1.4.0

[ilhamwahabi]

Looks like I should open new issue?

[limichange]

@IlhamWahabiGX emmmm, yep, please open a new issue 😉

[ilhamwahabi]

ok here it is

[itsmichaeldiego]

@NicoPennec @williamchong007 Thank you for the dotfiles fix and the favicon fix respectively! It saved me some time.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.