Vue3 Options API下vue-file-agent基础与Gmail风格示例启动问题

一、基础示例的"Cannot read properties of undefined (reading 'extend')"错误解决 #

这个错误是因为Vue3移除了全局Vue.extend方法，而你大概率用了适配Vue2的vue-file-agent版本，按以下步骤修复：

1. 卸载原包，安装Vue3适配版：

   npm uninstall vue-file-agent
   npm install vue-file-agent-next
   

2. 修改代码中的导入路径：
   将原来的

   import VueFileAgent from 'vue-file-agent'
   import 'vue-file-agent/dist/vue-file-agent.css'
   

   改为

   import VueFileAgent from 'vue-file-agent-next'
   import 'vue-file-agent-next/dist/vue-file-agent.css'
   

3. 调整组件注册方式：在Vue3 Options API组件中，直接在components选项注册组件，无需使用Vue.extend：

   export default {
     components: {
       VueFileAgent,
       VueFileAgentPreview: VueFileAgent.Preview
     },
     // 其他业务代码...
   }
   

二、Gmail Inspired Demo的"Invalid Host header"提示解决 #

这个是Codesandbox的预览域名被项目的Host安全校验拦截导致的，修改项目配置即可：

• 如果项目用Vue CLI（vue.config.js）：
  在配置文件中添加devServer的allowedHosts配置：

  module.exports = {
    devServer: {
      allowedHosts: 'all'
    }
  }
  

• 如果项目用Vite（vite.config.js）：
  修改server配置：

  export default {
    server: {
      host: '0.0.0.0',
      allowedHosts: 'all'
    }
  }
  

保存配置后重启项目，预览就能正常访问了。

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