Nuxt.js: Failed to load resource: net::ERR_FILE_NOT_FOUND

[nikitamarcius]

I have standard settings and when executing the command: nuxt generate. Generates the project without errors, but the.js file is why it does not connect:

Failed to load resource: net::ERR_FILE_NOT_FOUND manifest.59c7c806559ff96a25e8.js 
vendor.bundle.67255c6b8df9d11c1886.js Failed to load resource: net::ERR_FILE_NOT_FOUND
nuxt.bundle.778b2637042fd9960867.js Failed to load resource: net::ERR_FILE_NOT_FOUND
0.nuxt.bundle.f8e50548f4290fa37450.js Failed to load resource: net::ERR_FILE_NOT_FOUND
1.nuxt.bundle.4f48a18573cc7c3b8674.js Failed to load resource: net::ERR_FILE_NOT_FOUND

1. My project directory
2. Not the correct paths to the files that is created automatically.

With npm run dev: nuxt all works perfect.

OS: Windows / My GitHub project: https://github.com/nikitamarcius/awesomeicons

My nuxt.conf.js: https://github.com/nikitamarcius/awesomeicons/blob/master/nuxt.config.js

Npm modules downloaded literally today.

Of course I tried me manually to the path to the file in the directory dist/, nothing changed. Even an event @click="submit" does not work.

I deployed dist on gh-pages, same errors.

There is no routing on the project, only one static component in pages/index.vue

Solution

Thanks @alexchopin for the help

1. https://github.com/nuxt/nuxt.js/issues/1098#issuecomment-315690246
2. https://github.com/nuxt/nuxt.js/issues/1098#issuecomment-315779072

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

[davidcostadev]

I think this is really the route problem. I think you should use this with some http server, apache or nginx to test instead of open direct

[nikitamarcius]

@davidcostadev update topic

[alexchopin]

@nikitamarcius
1) You need to serve you static file to see the result and not open it directly into the browser:

npm install -g serve
serve ./dist

2) For GitHub Pages, you need to use router base if your URL has a base name.

[nikitamarcius]

@alexchopin

The routing'/' that interests me is by default, but I still made a change: https://github.com/nikitamarcius/awesomeicons/commit/37b52dedf1ffd32c71bb0c7e732b65bfabeca85d

Type: String
Default: '/'

Errors persisted. For the demo, I loaded the compiled statics on gh-pages: https://nikitamarcius.github.io/awesomeicons/

Same error as when running on the system. gh-pages deployed dist: https://github.com/nikitamarcius/awesomeicons/tree/gh-pages

[alexchopin]

@nikitamarcius your base should be awesomeicons in your case. Have you tried this:

router: {
     base: '/awesomeicons/'
}

[nikitamarcius]

@alexchopin yes, all the same.

I made a completely clean project to make it clearer:
https://github.com/nikitamarcius/nuxt-err

To test this:

git clone https://github.com/nikitamarcius/nuxt-err
cd nuxt-err
npm i
npm run generate

I think that the problem with the latest NUXT build.

[alexchopin]

@nikitamarcius I've tried with:

router: {
     base: '/awesomeicons/'
}

and it works for me:

<link as="script" href="/awesomeicons/_nuxt/manifest.52d743c1abd9eb763522.js" rel="preload"
<link as="script" href="/awesomeicons/_nuxt/vendor.bundle.67255c6b8df9d11c1886.js" rel="preload">
<link as="script" href="/awesomeicons/_nuxt/nuxt.bundle.3f1a09e48fb2ecac6753.js" rel="preload">
<link as="script" href="/awesomeicons/_nuxt/1.nuxt.bundle.c7475ddda41604ca49d7.js" rel="preload">
<link as="script" href="/awesomeicons/_nuxt/0.nuxt.bundle.a0eab06eb31666ee3dc7.js" rel="preload">

[nikitamarcius]

@alexchopin Yes, the paths have changed, but the project itself is still an error:

I try change route:

router: {
        base: '/awesomeicons/dist/'
    }

There are no errors on the local machine, errors remained only on gh-pages
But scripts still do not work on both

[nikitamarcius]

https://nikitamarcius.github.io/nuxt-err/ <- test page
clean project: https://github.com/nikitamarcius/nuxt-err

All the same errors

[alexchopin]

@nikitamarcius you need to have a .nojekyll file in your gh-pages branch to tell GitHub Page to serve _nuxt folder.
Nuxt creates this file in the dist folder, every files in this directory should be copy into your gh-pages branch.

[nikitamarcius]

@alexchopin Thank you very much for your time. Gulp for some strange reason ignored .nojekyll.
Now everything has worked 👍

[daggerok]

I also was facing with similar problem.. even latest nuxt generates .nojekyll file, it's still was not trivial to makes github pages project (not repo) deployment works:

package.json:

  "devDependencies": {
    "cross-env": "5.0.5",
    "gh-pages": "1.0.0",
    "ncp": "2.0.0",
    "npm-run-all": "4.0.2"
  },
  "scripts" : {
    "predeploy": "yarn install; npm-run-all predeploy:*",
    "predeploy:generate": "cross-env NODE_ENV=gh-pages nuxt generate",
    "predeploy:fallback": "ncp ./dist/index.html ./dist/404.html",
    "deploy": "gh-pages -d ./dist -b gh-pages -m \"Github Pages $(date +%Y-%m-%d) deployment\""
  },
  "homepage": "https://daggerok.github.io/vue-examples"

nuxt.config.js:

const base = 'gh-pages' === process.env.NODE_ENV ? '/vue-examples/' : '/';

module.exports = {
  router: {
    base,
  },
  build: {
    publicPath: '/static/',
    // ...
  },
  // ...
};

hope this will helps someone.
full example is here: https://github.com/daggerok/vue-examples/tree/master/09-nuxt-server-side-rendering

---

Regards,
Maksim

[lock[bot]]

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.