简体   繁体   English

Vue.js 'import' 在外部 js 文件中不起作用

[英]Vue.js 'import' does not work within external js file

Let me try to explain...让我试着解释一下……

I have an utils.js file which does not work:我有一个不起作用的utils.js文件:

import dayjs from 'dayjs'; //https://github.com/iamkun/dayjs

exports.utils = (function() {
    someDateFunction() {
       ...some dayjs function calls ....
    }
})();

(As stated by an answering person thta it needs to be module.exports - well it does not matter. I have other source files where it works either way - with or without prenoted module. .) (正如回答者所说,它需要是module.exports - 没关系。我有其他源文件可以以任何方式工作 - 有或没有预先标注的module. 。..)

When declaring the first line with the import statement vue-cli seems to properly compile.使用 import 语句声明第一行时,vue-cli 似乎可以正确编译。 no error is shown.没有显示错误。 Running in the browser shows:在浏览器中运行显示:

Uncaught ReferenceError: exports is not defined
    at eval (utils.js?2f14:3)
    at Module../src/assets/js/utils.js (app.js:1541)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    ...

It do include/import this utils.js file by noting它确实包含/导入此utils.js文件,请注意
const { utils } = require("@/assets/js/utils.js");

Why is it not allowed to import in the file?为什么不允许在文件中导入?
If you need informations about versions I run let me know and also let me know what commands will show the demanded information (running on macos).如果您需要有关我运行的版本的信息,请告诉我,并让我知道哪些命令将显示所需的信息(在 macos 上运行)。

I already searched the web.我已经搜索过 web。 the problem seems to be known in the past.这个问题似乎在过去就知道了。 There is some clues solving it with typescript or vue js.有一些线索可以用 typescript 或 vue js 解决。

Nothing works for me.没有什么对我有用。 I must not be the first one stumbling over issues like that, am I?我一定不会是第一个遇到此类问题的人,不是吗? Any help appreciated.任何帮助表示赞赏。

References:参考:
https://stackoverflow.com/a/55334703/845117 https://stackoverflow.com/a/55334703/845117

My dependencies in package.json我在package.json中的依赖项

"dependencies": {
  "axios": "^0.21.1",
  "bootstrap": "^4.5.3",
  "bootstrap-vue": "^2.18.0",
  "core-js": "^3.6.5",
  "cropperjs": "^1.5.9",
  "dayjs": "^1.9.6",
  "vue": "^2.6.12"
},

One solution I just found:我刚刚找到的一种解决方案:

instead of代替

import dayjs from 'dayjs';

I use我用

const dayjs = require('dayjs');

That works.这样可行。 I figured it by by reading https://www.educba.com/require-vs-import/我通过阅读https://www.eduba.com/require-vs-import/
I cannot really argue why it works the one and not the other way.我不能真正争论为什么它以一种方式而不是另一种方式起作用。 (Since I am not a native speaker I just understood 15% of the article. And I have not yet tried tuhin47 's proposal) (由于我不是母语人士,我只理解了文章的 15%。而且我还没有尝试过tuhin47的建议)

It says exports does not exist because it should be module.exports = <your function definition>它说出口不存在,因为它应该是 module.exports = <your function 定义>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM