如何在Nuxt首页设置匿名中间件且不修改现有默认导出类

不用动原来的类组件代码，直接在首页的.vue文件里，在默认导出的类外面单独加个页面级中间件就行，注意要只在客户端执行（服务器端没有document对象，直接跑会报错），代码示例：

// 原有的类代码完全保留，别改
export default class Index extends Vue {
  // 原来的所有代码都不动
}

// 新增这部分，单独导出中间件
export const middleware = () => {
  if (process.client) {
    const script = document.createElement('script')
    script.src = '你的外部脚本完整地址'
    // 可选：脚本加载完成后要执行的逻辑
    script.onload = () => {
      console.log('外部脚本加载完成')
    }
    document.head.appendChild(script)
  }
}

要是单独导出中间件还是没效果，查这两点：

• 你的Nuxt版本得是2及以上，才支持这种单独导出的写法
• 确认脚本地址没问题，要是涉及跨域，得确保目标脚本允许跨域访问

这种方式刚好适配多语言首页的情况——不管首页路由是/zh、/en还是别的，只要渲染的是这个首页组件，中间件就会自动执行，不用特意配置路由匹配规则。

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