data-ignore="True"会导航到index.html页面，并不会把index.html的内容加载到dom中

<template> <div> <!-- 增加加载状态提示 --> <div v-if="loadingStatus === 'loading'">模块加载中...</div> <div v-else> <p v-if="translation">{{ translation }}</p> <button @click="handleTranslate('你好')">执行翻译</button> </div> <p v-if="error" class="error-message">{{ error }}</p> </div> </template> <script> // 模块加载状态枚举 const LOAD_STATES = { IDLE: 'idle', LOADING: 'loading', LOADED: 'loaded', ERROR: 'error' } export default { data() { return { yiyu: null, translation: '', error: null, loadingStatus: LOAD_STATES.IDLE, scriptTag: null // 存储脚本标签引用 } }, mounted() { this.loadExternalScript() }, methods: { // 传统脚本加载方法 loadExternalScript() { this.loadingStatus = LOAD_STATES.LOADING // 创建脚本标签 this.scriptTag = document.createElement('script') this.scriptTag.type = 'module' this.scriptTag.src = 'https://avatar.gbqr.net/yiyu.js' this.scriptTag.async = true // 成功回调 this.scriptTag.onload = () => { this.loadingStatus = LOAD_STATES.LOADED this.initializeModule() } // 错误处理 this.scriptTag.onerror = (error) => { this.loadingStatus = LOAD_STATES.ERROR this.error = `脚本加载失败: ${error.message || '未知错误'}` this.cleanupScript() } // 添加到DOM document.head.appendChild(this.scriptTag) }, // 模块初始化 initializeModule() { try { // @ts-ignore if (typeof yiyu !== 'undefined') { this.yiyu = yiyu this.yiyu.app.init({ name: '', readLocalResource: false }) } else { throw new Error('全局模块对象未定义') } } catch (e) { this.error = `模块初始化失败: ${e.message}` } }, // 执行翻译 async handleTranslate(text) { if (!this.yiyu) { this.error = '翻译引擎未就绪' return } try { this.translation = await this.yiyu.app.startTranslate(text) } catch (e) { this.error = `翻译错误: ${e.message}` } }, // 清理脚本标签 cleanupScript() { if (this.scriptTag) { document.head.removeChild(this.scriptTag) this.scriptTag = null } } }, beforeDestroy() { // 组件卸载时清理 this.cleanupScript() if (this.yiyu?.cleanup) { this.yiyu.app.cleanup() } } } </script> <style scoped> .error-message { color: #ff0000; font-weight: bold; } </style>在离开此页面回到主页面时调用的yiyu无法消失

vue2项目中<template> <div> <!-- 增加加载状态提示 --> <div v-if=“loadingStatus === ‘loading’”>模块加载中…</div> <div v-else> <p v-if=“translation”>{{ translation }}</p> <button @click=“handleTranslate(‘你好’)”>执行翻译</button> </div> <p v-if=“error” class=“error-message”>{{ error }}</p> </div> </template> <script> // 模块加载状态枚举 const LOAD_STATES = { IDLE: ‘idle’, LOADING: ‘loading’, LOADED: ‘loaded’, ERROR: ‘error’ } export default { data() { return { yiyu: null, translation: ‘’, error: null, loadingStatus: LOAD_STATES.IDLE, scriptTag: null // 存储脚本标签引用 } }, mounted() { this.loadExternalScript() }, methods: { // 传统脚本加载方法 loadExternalScript() { this.loadingStatus = LOAD_STATES.LOADING // 创建脚本标签 this.scriptTag = document.createElement(‘script’) this.scriptTag.src = ‘https://avatar.gbqr.net/yiyu.js’ this.scriptTag.async = true // 成功回调 this.scriptTag.onload = () => { this.loadingStatus = LOAD_STATES.LOADED this.initializeModule() } // 错误处理 this.scriptTag.onerror = (error) => { this.loadingStatus = LOAD_STATES.ERROR this.error = 脚本加载失败: ${error.message || '未知错误'} this.cleanupScript() } // 添加到DOM document.head.appendChild(this.scriptTag) }, // 模块初始化 initializeModule() { try { // @ts-ignore if (typeof yiyu !== ‘undefined’) { this.yiyu = yiyu this.yiyu.init({ name: ‘需要登录的账号’, readLocalResource: false }) } else { throw new Error(‘全局模块对象未定义’) } } catch (e) { this.error = 模块初始化失败: ${e.message} } }, // 执行翻译 async handleTranslate(text) { if (!this.yiyu) { this.error = ‘翻译引擎未就绪’ return } try { this.translation = await this.yiyu.startTranslate(text) } catch (e) { this.error = 翻译错误: ${e.message} } }, // 清理脚本标签 cleanupScript() { if (this.scriptTag) { document.head.removeChild(this.scriptTag) this.scriptTag = null } } }, beforeDestroy() { // 组件卸载时清理 this.cleanupScript() if (this.yiyu?.cleanup) { this.yiyu.cleanup() } } } </script> <style scoped> .error-message { color: #ff0000; font-weight: bold; } </style>Uncaught SyntaxError: Unexpected token ‘export’

<template> <div> <!-- 增加加载状态提示 --> <div v-if=“loadingStatus === ‘loading’”>模块加载中…</div> <div v-else> <p v-if=“translation”>{{ translation }}</p> <button @click=“handleTranslate(‘你好’)”>执行翻译</button> </div> <p v-if=“error” class=“error-message”>{{ error }}</p> </div> </template> <script> // 模块加载状态枚举 const LOAD_STATES = { IDLE: ‘idle’, LOADING: ‘loading’, LOADED: ‘loaded’, ERROR: ‘error’ } export default { data() { return { yiyu: null, translation: ‘’, error: null, loadingStatus: LOAD_STATES.IDLE, scriptTag: null // 存储脚本标签引用 } }, mounted() { this.loadExternalScript() }, methods: { // 传统脚本加载方法 loadExternalScript() { this.loadingStatus = LOAD_STATES.LOADING // 创建脚本标签 this.scriptTag = document.createElement(‘script’) this.scriptTag.type = ‘module’ this.scriptTag.src = ‘https://avatar.gbqr.net/yiyu.js’ this.scriptTag.async = true // 成功回调 this.scriptTag.onload = () => { this.loadingStatus = LOAD_STATES.LOADED this.initializeModule() } // 错误处理 this.scriptTag.onerror = (error) => { this.loadingStatus = LOAD_STATES.ERROR this.error = 脚本加载失败: ${error.message || '未知错误'} this.cleanupScript() } // 添加到DOM document.head.appendChild(this.scriptTag) }, // 模块初始化 initializeModule() { try { // @ts-ignore if (typeof yiyu !== ‘undefined’) { this.yiyu = yiyu this.yiyu.app.init({ name: ‘’, readLocalResource: false }) } else { throw new Error(‘全局模块对象未定义’) } } catch (e) { this.error = 模块初始化失败: ${e.message} } }, // 执行翻译 async handleTranslate(text) { if (!this.yiyu) { this.error = ‘翻译引擎未就绪’ return } try { this.translation = await this.yiyu.app.startTranslate(text) } catch (e) { this.error = 翻译错误: ${e.message} } }, // 清理脚本标签 cleanupScript() { if (this.scriptTag) { document.head.removeChild(this.scriptTag) this.scriptTag = null } } }, beforeDestroy() { // 组件卸载时清理 this.cleanupScript() if (this.yiyu?.cleanup) { this.yiyu.app.cleanup() } } } </script> <style scoped> .error-message { color: #ff0000; font-weight: bold; } </style>在离开此页面到其他页面时调用的yiyu需要刷新一下页面才能消失