Nuxt.js: Web application is breaking in functionality due to routing issues in Nuxt Static Generate.

[thisguymartin]

I am having trouble with CSS and scripts breaking when refreshing my page, we are utilizing Buefy UI . We are utilizing static generated structure running "npm run generate" in order to obtain static generate structure to deploy project as a static project. The project runs successfully and works when it comes to normal routes, when it starts. However, for some reason when I refresh the page the CSS breaks so does the functionality such as search or forms. This seems to be a routing issue as our URL changes when we refreshed and it adds a "/". It seems that based on the Nuxt static generate project structure. I am unable to change the routes as Nuxt builds my routes based on my pages folder structure. Does anyone have a solution or has gone through this?

The only configuration in our code for nuxt.configuration for the routes is the following below. This route is set up to display our initial page, which is the login page.
router: { extendRoutes(routes, resolve) { routes.push({ name: 'index', path: '/', component: resolve(__dirname, 'pages/login.vue') }) torch.white(routes) } },

_{This bug report is available on Nuxt.js community (#c805)}

[Atinux]

Hi,

Can you add in your Nuxt.config.js:

router: {
base: "/"
}

And try again?

[thisguymartin]

It launched and worked correctly at first just like before for the initial page, once I was in the second page and hit refresh the routing changed. So it went from http://127.0.0.1:8080 companies to this http://127.0.0.1:8080/companies/ which cause the page to break. Doesn't look like a huge deal, but breaking the scripts and CSS. Not also that but, if I click on any other links that route me different page with http://127.0.0.1:8080/companies/index.html.

[Atinux]

Can you create a repo to reproduce this issue? This will help us to fix it faster.

[jakeknight]

I'm also having a similar issue to this. Everything works fine as it should in dev, the problems occur when our site is live after the build tasks.

If we refresh the site on a page, it'll break the scripts on that page...if I navigate to another page and comeback to that page... it's fixed.

Also, if we refresh the page on our home page and then try to navigate to another page the url is "oururl.co.uk/maf-home/scope" which results in a 404 as that page doesn't exsist... the url should be "oururl.co.uk/scope"

[conglinhmaster]

Me too, having a similiar issue with @jakeknight. I try to install https://github.com/monterail/vue-multiselect. It works fine on dev, but when I dorun generate. Then, refresh page, the multiSelect element will be disappear.
Edit: I have found a solution.
https://gist.github.com/rvanzon/096132b7b46be43659cf26360c664e9a

[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.