Vue 3 页面标题与动态 Meta 配置分四层：1. 构建时首页标题用 vite-plugin-html 注入；2. 路由级标题通过路由 meta + beforeEach 守卫统一设置；3. SEO/分享需 vue-meta 支持多维 meta 标签；4. 异步数据标题用 Pinia store 响应式管理。

Vue 3 项目初始化阶段配置页面标题和动态 Meta，核心是分层处理：首页初始标题靠构建时注入，路由级标题靠路由守卫统一控制，SEO/分享类 Meta 则需专用方案支持。不需要一上来就上重型库，按需组合最轻量的几种方式即可跑通。

初始化时设置默认首页标题（vite-plugin-html）

适用于多环境（dev/test/prod）或品牌定制场景，比如“客户A管理平台”“测试版后台”。它只改 index.html 的初始 <title></title>，不干预后续路由跳转。

• 安装插件：npm install vite-plugin-html --save-dev
• 在 vite.config.ts 中配置：

  import { createHtmlPlugin } from 'vite-plugin-html';
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          title: process.env.VITE_APP_TITLE || 'Vue3 后台系统'
        }
      }
    })
  ]

• 在 .env.production 里写：VITE_APP_TITLE=客户A运营中心，构建时自动生效

路由跳转时动态更新 document.title（路由 meta + 全局守卫）

这是最常用、最轻量的页面级标题控制方式。每个路由声明自己的显示名，跳转时由守卫统一写入 document.title。

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

• 在路由配置中添加 meta.title，例如：

  { 
    path: '/user', 
    name: 'UserList', 
    component: () => import('@/views/UserList.vue'), 
    meta: { title: '用户管理 - 后台系统' } 
  }

• 在 src/router/index.ts 或 main.ts 中注册前置守卫：

  router.beforeEach((to) => {
    document.title = to.meta.title || '默认标题';
  });

• 确保组件内不重复调用 document.title = ...，否则会覆盖守卫逻辑

需要 SEO 或微信分享时补充动态 Meta（vue-meta）

仅改 title 不够——搜索引擎抓取、微信公众号预览依赖 <meta name="description">、<meta property="og:title"> 等。这时必须用 vue-meta。

立即学习“前端免费学习笔记（深入）”；

• 安装：npm install vue-meta
• 在 main.ts 初始化：

  import { createApp } from 'vue';
  import { createMetaManager } from 'vue-meta';
  const app = createApp(App);
  app.use(createMetaManager());

• 在组件中定义：

  export default {
    metaInfo() {
      return {
        title: this.pageTitle || '商品详情',
        meta: [
          { name: 'description', content: this.desc },
          { property: 'og:title', content: this.pageTitle }
        ]
      };
    }
  }

异步数据决定标题时用 Pinia 管理（响应式场景）

当标题来自接口（如“订单 #123456 详情”），而路由 meta 是静态的，就得靠状态驱动。Pinia store 是 Vue 3 官方推荐方案，比手动操作 DOM 更可靠。

• 新建 store/title.ts：

  import { defineStore } from 'pinia';
  export const useTitleStore = defineStore('title', {
    state: () => ({ title: '默认标题' }),
    actions: {
      setTitle(newTitle: string) {
        this.title = newTitle;
        document.title = newTitle;
      }
    }
  });

• 在页面组件中调用（比如订单详情页）：

  const titleStore = useTitleStore();
  onMounted(async () => {
    const res = await api.getOrderDetail(id);
    titleStore.setTitle(`订单 #${res.id} - 详情`);
  });