如何在Nuxt.js中定义动态路由属性？——nuxt.config.js中的router属性与动态子目录

Great question! The core problem with your current setup is that the production router base is hardcoded during the build process, which locks your app into running only under /87833/. To support dynamic ID paths like /87834/ or /87835/ with a single build, you need to calculate the router base at runtime using the current URL.

Here's a step-by-step solution (assuming you're using Vue.js, since your config references process.env.BASE_URL—a common pattern in Vue CLI projects):

1. Modify Router Config to Calculate Base Dynamically #

Replace your hardcoded production base with a function that extracts the ID from the current URL path:

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import yourRoutes from './routes'; // Import your existing route definitions

Vue.use(VueRouter);

const getDynamicRouterBase = () => {
  // Split the current path into segments, filtering out empty strings
  const pathSegments = window.location.pathname.split('/').filter(segment => segment);
  
  // Grab the first non-empty segment as our dynamic ID (e.g., "87833" from "/87833/")
  const dynamicId = pathSegments[0];
  
  // Optional: Fallback to a default ID if no segment exists (adjust to your needs)
  const basePath = dynamicId ? `/${dynamicId}/` : '/default-id/';

  // Use development BASE_URL as before; production uses the dynamic path
  return process.env.NODE_ENV === "development" 
    ? process.env.BASE_URL 
    : basePath;
};

const router = new VueRouter({
  base: getDynamicRouterBase(),
  routes: yourRoutes
});

export default router;

2. Configure Your Server to Support SPA Routing #

When users refresh a page at a dynamic path (e.g., test.domain.com/87834/dashboard), your server will throw a 404 unless it's set to redirect all requests to index.html. Here's how to fix this for common servers:

Nginx #

Add this to your server block:

location / {
  try_files $uri $uri/ /index.html;
}

Apache (via .htaccess) #

Create or update .htaccess in your project's root directory:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

3. Key Notes to Remember #

• Clean Route Definitions: Keep your route paths simple (e.g., /dashboard instead of /87833/dashboard). The router base will automatically prepend the dynamic ID to all routes.
• Single Build, Multiple Deployments: With this setup, you only need to build your app once—it will adapt to any ID subdirectory you deploy it to.
• Fallback Behavior: The default-id fallback in the function is optional. You can adjust it to redirect to a 404 page or another default path if no ID is present in the URL.

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