Vue导入导致无法分配给对象错误的只读属性'exports'

Question

我目前正在将一个 HTML 模板迁移到 Vue。 现在我开始导入存储在src 中的main.js 文件中的Javascript 文件。

我的文件如下所示：

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

import pageLoader from "./assets/js/global/page-loader";
import tooltips from "./assets/js/global/tooltips";

Vue.use(pageLoader);
Vue.use(tooltips);

Vue.config.productionTip = false;

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

每个 Javascript 文件都位于 src/js 文件夹中

但是一旦我运行应用程序，我就会收到以下错误：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (webpack-internal:///./src/assets/js/utils/plugins.js:56)
    at eval (webpack-internal:///./src/assets/js/utils/plugins.js:57)
    at Module../src/assets/js/utils/plugins.js (app.js:1579)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/assets/js/global/tooltips.js:1)
    at Object../src/assets/js/global/tooltips.js (app.js:1556)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/main.js:15)

整个项目可以在 github 上的以下链接中看到：Link to github

是什么导致了这个错误？如果能帮助我解决我的问题，我将不胜感激。

Answer 1

您的文件没有导出 Vue 尝试使用的功能。

您需要做的是导出您在文件中找到的函数。

请参阅这份在 VueJs 中导出函数的指南：https://medium.com/js-dojo/a-beginners-guide-to-exports-in-es6-af27b5a621d0

这将帮助您了解如何从这些文件中导出函数以供 Vue 运行。