javascript - Vue 不会在 main.js 中加载 javascript 文件

Question

我一直在尝试以多种方式在我的VUE项目中加载 Javascript 文件，但几乎任何我尝试过的代码都无法正常工作。

到目前为止我做了什么：

1. 运行 NPM 命令：vue create client。
2. 将 vue-router 添加到 package.json。
3. 创建 Home.vue 文件并将其添加到 router.js 文件中。
4. 将 Javascript 和 Css 文件移动到 src/assets
5. 在 App.vue 文件中导入 Css 样式。
6. main.js 文件中必需的 Javascript 文件。

main.js 文件示例：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

require("./assets/js/utils/app.js");
require("./assets/js/utils/page-loader.js");
require("./assets/js/vendor/simplebar.min.js");
require("./assets/js/utils/liquidify.js");
require("./assets/js/vendor/xm_plugins.min.js");
require("./assets/js/global/global.hexagons.js");
require("./assets/js/global/global.tooltips.js");
require("./assets/js/header/header.js");
require("./assets/js/sidebar/sidebar.js");
require("./assets/js/content/content.js");
require("./assets/js/form/form.utils.js");
require("./assets/js/utils/svg-loader.js");

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

这样我会收到以下错误消息：

Uncaught TypeError: Cannot read property 'createHexagon' of undefined
    at eval (global.hexagons.js?f18d:4)
    at Object../src/assets/js/global/global.hexagons.js (app.js:1484)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js?56d7:10)
    at Module../src/main.js (app.js:1632)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1657)
    at __webpack_require__ (app.js:849)

所以我测试使用以下 npm 模块vue-plugin-load-script：我已将 js 文件夹从 src/assets/js 复制到 public 文件夹，并将我的 main.js 文件更改为如下所示：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import LoadScript from "vue-plugin-load-script";

Vue.use(LoadScript);

Vue.loadScript("js/utils/app.js");
Vue.loadScript("js/utils/page-loader.js");
Vue.loadScript("js/vendor/simplebar.min.js");
Vue.loadScript("js/utils/liquidify.js");
Vue.loadScript("js/vendor/xm_plugins.min.js");
Vue.loadScript("js/global/global.hexagons.js");
Vue.loadScript("js/global/global.tooltips.js");
Vue.loadScript("js/header/header.js");
Vue.loadScript("js/sidebar/sidebar.js");
Vue.loadScript("js/content/content.js");
Vue.loadScript("js/form/form.utils.js");
Vue.loadScript("js/utils/svg-loader.js");

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

现在有时会加载 Javascript 文件。例如，我将网站刷新了 5 次，结果如下所示：

显示加载的 Gif 图像

可以看出，使用这种方法，javascript 文件只会加载一半的时间。我将不胜感激任何帮助和建议。

标签： javascriptvue.js