Vue MPA多语言动态路由配置异常问题求助

核心问题分析 #

Vue CLI的MPA页面配置（pages）中的key是最终生成的静态HTML文件名，不支持动态路径参数（如:locale?）。之前的错误配置导致服务器无法正确映射带locale的URL到对应的MPA页面，同时首页路由的通配规则捕获了所有路径，导致about页面无法正确加载。

解决方案步骤 #

1. 修正vue.config.js配置 #

保持pages的key为固定名称，确保每个页面输出路径正确：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pages: {
    index: {
      entry: './src/pages/Home/main.js',
      filename: 'index.html'
    },
    about: {
      entry: './src/pages/About/main.js',
      filename: 'about.html'
    }
  },
  publicPath: '/'
})

2. 调整路由配置 #

首页路由（Home/index.js）

修改路由规则，排除about路径的匹配，避免首页路由捕获所有请求：

import { createRouter, createWebHistory, RouterView } from "vue-router";
import HomeSub from "../views/HomeSub.vue";
import InviteSub from "../views/InviteSub.vue";
import Tr from "./../../../../translation.js";

const routes = [
  {
    path: "/:locale?",
    component: RouterView,
    beforeEnter: (to, from, next) => {
      // 让about路径跳过当前路由，交给about页面处理
      if (to.fullPath.includes('/about')) {
        return next(false);
      }
      return Tr.routeMiddleware(to, from, next);
    },
    children: [
      {
        path: "",
        name: "home",
        component: HomeSub
      },
      {
        path: "invite",
        name: "invite",
        component: InviteSub
      }
    ]  
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

About页面路由（About/index.js）

调整路径规则，匹配带/不带locale的请求，同时替换错误的组件引用：

import { createRouter, createWebHistory, RouterView } from "vue-router";
import AboutSub from "../views/AboutSub.vue"; // 替换为实际的About组件
import Tr from "./../../../../translation.js";

const routes = [
  {
    path: "/:locale?/about",
    component: RouterView,
    beforeEnter: Tr.routeMiddleware,
    children: [
      {
        path: "",
        name: "about",
        component: AboutSub
      }
    ]
  },
  // 重定向不带locale的/about到默认语言路径
  {
    path: "/about",
    redirect: () => {
      const defaultLocale = Tr.chooseDefaultLocale();
      return `/${defaultLocale}/about`;
    }
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

3. 服务器配置（必做） #

MPA是静态页面，需要服务器将带locale的URL映射到对应HTML文件。以Nginx为例，添加以下规则：

server {
  listen 80;
  server_name your-domain.name;
  root /path/to/your/dist;

  # 处理带locale的首页/invite路径
  location ~ ^/([a-z]{2})/(invite)?$ {
    try_files $uri /index.html;
  }

  # 处理带locale的about路径
  location ~ ^/([a-z]{2})/about$ {
    try_files $uri /about.html;
  }

  # 处理不带locale的about路径
  location = /about {
    try_files $uri /about.html;
  }

  # 静态资源缓存配置
  location ~* \.(js|css|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

其他服务器（如Apache）需配置对应rewrite规则，核心逻辑一致：让/en/about指向about.html，/en//en/invite指向index.html。

4. 验证效果 #

• 访问/en/about：服务器返回about.html，About路由匹配路径并加载对应组件
• 访问/about：自动重定向到带默认语言的/xx/about路径
• 访问/en//en/invite：正常加载首页及对应子页面

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