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

Posted 2023-02-16

【中文标题】Vue导入导致无法分配给对象错误的只读属性\'exports\'

【英文标题】：Vue import causing cannot assign to read only property 'exports' of object errorVue导入导致无法分配给对象错误的只读属性'exports'

【发布时间】：2021-07-25 10:59:46

【问题描述】：

我目前正在将一个 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

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

【问题讨论】：

请在问题本身中提供所有相关信息。指向外部代码存储库的链接不是合适的替代品

这个问题是调用插件文件的错误是只有 tooltips.js 文件需要的。所以它实际上需要我提供一堵代码墙。

参见How to create a Minimal, Reproducible Example，重点关注“最小”部分

【参考方案1】：

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

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

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

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

【讨论】：

所以我必须导出到目前为止这是一个很好的信息的功能。但是我将如何在以下函数上使用命名导出：此文件中的 plugins.createTooltip：github.com/d4ne/xanoty/blob/main/client/src/assets/js/global/…

将此插件数据封装到自己的文件夹中可能不是您想要的方式。我建议把这个逻辑拉到你的 main.js 文件中，它会起作用的。绕过导入的东西。你通常只导入函数和回调