Nuxt.js刷新后重复链接及npm run generate构建报错问题

Hey there, let's break down and solve the two problems you're facing: Bootstrap nav links turning into /about/about after refreshing, and errors when running npm run generate.

Why the Nav Links Break on Refresh #

This is almost certainly a relative path problem. If you're using regular <a> tags with relative paths like href="about" in your Bootstrap navigation, when you're on the /about page and refresh, the browser treats about as relative to the current path (/about/), so it resolves to /about/about.

Fixes for the Navigation Link Issue #

1. Use Nuxt's <nuxt-link> Component (Recommended) #

Nuxt's built-in <nuxt-link> handles routing correctly automatically, so it avoids relative path confusion. Swap out your Bootstrap <a> tags with this component:

<nuxt-link to="/about" class="nav-link">About</nuxt-link>

No matter which page you're on or if you refresh, this will always point to the correct /about route.

2. Stick with Native <a> Tags? Use Absolute Paths #

If you prefer to keep using regular <a> tags, make sure all your navigation links use absolute paths (start with a /):

<a href="/about" class="nav-link">About</a>

Absolute paths are resolved from your website's root directory, so they won't be affected by the current page's URL.

Troubleshooting npm run generate Errors #

If npm run generate is throwing errors, it's likely related to your routing setup or page structure:

• Double-check your pages directory: Make sure about.vue exists (or pages/about/index.vue for nested routing) and there are no conflicting route configurations.
• Look at the specific error message from the generate command—common issues include undefined routes, failed async data requests, or missing page components. Fixing the navigation path issue above might also resolve generate errors if they're route-related.

Quick Pro Tips #

• Test your routes first in development mode with npm run dev—make sure refreshing pages doesn't break links before running generate.
• If you're using BootstrapVue, its navigation components like <b-nav-item> support the to attribute directly, so you can just pass the absolute path:

<b-nav-item to="/about">About</b-nav-item>

内容的提问来源于stack exchange，提问作者Jakub Martenka