index.html 中包含的 JS 在 VUE 项目中的 main.js 中不起作用

编程问答 2022-04-22

问题描述

下面是一个简单的 VueJS 应用程序的 index.html。我包括了来自 netvibes.com 的小部件。我已经在 html 文件中包含了小部件代码及其工作。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/">

<head>
  <!-- Application Metas -->
  <title>Hello World sample</title>
  <Meta name="debugMode" content="false" />
  <Meta name="strictMode" content="false" />
  
  <!-- UWA Environment -->
  <script type="text/javascript" src="https://uwa.netvibes.com/lib/c/UWA/js/UWA_Standalone_Alone.js"></script>

  <!-- Application Preferences -->
  <widget:preferences>
  </widget:preferences>

  <script>
    var MyWidget = {
      onLoad: function () {
        widget.setBody('Hello World!');
      }
    };
    widget.addEvent('onLoad',MyWidget.onLoad);
  </script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

Output

但相同的“小部件”并未反映在 main.js 文件中。我在编译时收到“错误 'widget' is not defined no-undef”。我使用的是 Visual Studio Code。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

var mainComponent = null;
function start() {
    widget.setTitle('Find Coach Application');
    mainComponent = createApp(App);
    mainComponent.use(router);
    mainComponent.use(store);
    window.Bus = mainComponent;
    mainComponent.mount("#app");
}

export default function () {
    widget.addEvent("onLoad",() => {
        start();
    });
    widget.addEvent("onRefresh",() => {
        mainComponent.$emit("widgetRefresh");
    });
    widget.addEvent("onResize",() => {
        mainComponent.$emit("widgetResize");
    });
    widget.addEvent("onSearch",(data) => {
        mainComponent.$emit("widgetSearch",data);
    });
}

请帮忙。不确定我在这里缺少什么。

解决方法

从 main.js 尝试访问它：

window.widget
htmljavascriptjspjspvue.jswidget