Vue Router中导入Vue使用vue-meta报错的问题咨询

原写法问题分析 #

你用的import {vue} from 'vue'完全不可行，报错原因有两点：

1. Vue 3 中不存在名为vue的导出项，且不再默认导出Vue构造函数（这是Vue 2的用法），所以会提示“没有导出名为default”的错误。
2. vue-meta 在Vue 3中的版本（v3.x）用法和Vue 2完全不同，不能直接通过Vue.use()来注册。

正确配置步骤 #

1. 安装适配Vue 3的vue-meta版本 #

确保你安装的是支持Vue 3的最新版：

npm install vue-meta@latest

2. 在全局入口文件（main.js）配置vue-meta #

Vue 3要求通过createApp创建的应用实例来注册插件，建议把vue-meta配置放在项目入口文件，而非路由文件：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createMetaManager } from 'vue-meta'

const app = createApp(App)
app.use(router)
// 注册并配置vue-meta
app.use(createMetaManager({
  keyName: 'metaInfo',
  attribute: 'data-vue-meta',
  ssrAttribute: 'data-vue-meta-server-rendered',
  tagIDKeyName: 'vmid',
  refreshOnceOnNavigation: true
}))
app.mount('#app')

3. 修正路由文件代码 #

你的路由文件还缺少createRouter和createWebHistory的导入，补上后代码如下：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import home from '../components/home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: home },
    { path: '/business', name: 'business', component: () => import('../components/business.vue') },
    { path: '/about', name: 'about', component: () => import('../components/about.vue') },
    { path: '/faqs', name: 'faq', component: () => import('../components/faq.vue') },
    { path: '/termOfServices', name: 'termOfServices', component: () => import('../components/termOfServices.vue') }
  ],
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { el: to.hash, behavior: 'smooth' }
    }
    return savedPosition || { top: 0 }
  }
})

export default router

4. 在组件中设置SEO信息 #

配置完成后，就可以在组件里通过选项式API或组合式API设置元信息：

选项式API示例

<!-- home.vue -->
<script>
export default {
  metaInfo() {
    return {
      title: '首页 | 我的网站',
      meta: [
        { name: 'description', content: '这是我的网站首页，欢迎访问' }
      ]
    }
  }
}
</script>

组合式API示例

<!-- home.vue -->
<script setup>
import { useMeta } from 'vue-meta'

useMeta({
  title: '首页 | 我的网站',
  meta: [
    { name: 'description', content: '这是我的网站首页，欢迎访问' }
  ]
})
</script>

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