以上代码中报错：Uncaught TypeError: Cannot read properties of undefined (reading 'widget')

### 解决 Vue3 中使用 TradingView 出现的 `Uncaught TypeError: Cannot read properties of undefined (reading 'widget')` 错误 此错误通常是由于未正确加载 TradingView 的 JavaScript 库或全局变量未被正确定义所引起的。以下是详细的分析与解决方案： #### 1. 确保正确加载 TradingView 脚本 在 Vue3 项目中，如果直接通过 `<script>` 标签引入 TradingView 的脚本文件，则需要确保该脚本已完全加载后再调用其方法。可以通过以下方式验证： ##### 方法一：动态加载脚本 在组件的生命周期钩子函数中动态加载 TradingView 的脚本文件，并等待其完成加载再初始化图表。 ```javascript <template> <div ref="tvWidgetContainer" class="tradingview-container"></div> </template> <script> import { onMounted, ref } from 'vue'; function loadScript(src, callback) { const script = document.createElement('script'); script.src = src; script.onload = () => callback(); document.head.appendChild(script); } export default { name: "TradingViewChart", setup() { const tvWidgetContainer = ref(null); onMounted(() => { loadScript("https://s3.tradingview.com/tv.js", () => { if (typeof window.TradingView === 'undefined') { console.error("TradingView library failed to load."); return; } new window.TradingView.widget({ container_id: "tvWidgetContainer", symbol: "NASDAQ:AAPL", interval: "D", theme: "light", style: "1", locale: "en", toolbar_bg: "#f1f3f6", enable_publishing: false, allow_symbol_change: true, hide_side_toolbar: false, details: true }); }); }); return { tvWidgetContainer, }; }, }; </script> <style scoped> .tradingview-container { width: 100%; height: 80vh; } </style> ``` 在此代码中，`loadScript` 是一个辅助函数，用于异步加载外部脚本并执行回调函数[^5]。 #### 2. 检查是否存在命名冲突 有时其他第三方库可能覆盖了全局对象 `window.TradingView`，导致无法正常访问其属性和方法。为了避免这种情况，建议在加载完成后立即保存对 `window.TradingView` 的引用。 ```javascript let TV; onMounted(() => { loadScript("https://s3.tradingview.com/tv.js", () => { TV = window.TradingView; if (!TV || typeof TV !== 'object' || !TV.widget) { console.error("Failed to initialize TradingView widget"); return; } new TV.widget({ container_id: "tvWidgetContainer", symbol: "NASDAQ:AAPL", ... }); }); }); ``` 这样可以防止后续代码意外修改原始的 `window.TradingView` 对象[^6]。 #### 3. 使用 CDN 替代本地安装 尽管可以通过 npm 安装 `trading-vue-js`，但在某些情况下，它可能不包含完整的 TradingView 功能集。因此推荐优先采用官方提供的 CDN 链接作为主要依赖源。 #### 4. 处理潜在的安全策略问题 部分浏览器安全策略会阻止跨域资源请求或者禁用特定类型的脚本执行。为了排除此类可能性，请确认服务器端 CORS 设置允许来自目标站点的内容访问；同时检查是否有 Content Security Policy (CSP) 干预脚本加载过程[^7]。 --- ### 总结 上述方案分别从脚本加载顺序、命名空间保护以及环境兼容性角度出发解决了可能出现的 `TypeError` 异常情况。实际部署过程中还需结合具体业务场景灵活调整配置选项以满足需求。