Question

我的第三方脚本具有以下格式的代码

(   function initialMethod(scope, factory) {
        // 'scope' here is UNDEFINED when used in Vue
        // but it is fine in React and Angular
    } (this, function function1(param1) {
              .....
             }       
      )          
    ....    
    function MyMethod() {....}
    ....
)

我使用以下方法从该第三方库中导入方法

import {MyMethod} from 'ThirdPartyScript'

当我在React或Angular中执行此操作时，它工作正常。

使用Vue时失败。 “ scope” /“ this”是未定义的。 Vue示例代码

<template>
    <div id="app">
       <p>Hello</p>
    </div>
</template>


<script>
    import {MyMethod} from 'ThirdPartyScript';

    export default {
        name: 'app',        
        created: function () {
          this.initApp();
        },
        methods: {
            initApp: function () {                
                //const myResult = MyMethod();
            } 
    }
</script>

当我包含第三方库的“ import”语句时（与我从其中调用方法时的情况一样），就像我调用import语句时一样，我相信它会执行“ initialMethod” （）告诉它执行。

为什么在Vue中有什么不同？使用Vue时是否需要设置其他内容？

环境信息

我使用Vue CLI创建了我的项目，package.json中提到了以下版本

dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",        
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
 },

更新

如果我将第三方库中的“ this”更改为“ window”，我会走得更远，但是现在在以下调用中

const myResult = MyMethod();

我收到“ MyMethod”的错误“ Object（...）不是函数”

Answer 1

我终于解决了这个问题。

仅当我在项目中拥有该库的本地副本（与其他javascript util文件放在“脚本”下）时，才会出现此问题。

当我通过将库添加到package.json / package-lock.json来添加库，然后运行“ npm install”时，库正确加载，并且我不再看到任何错误

package.json

"dependencies": {
    "theLibrary": "https://.......",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
},

package-lock.json

"dependencies": {
    ......
    "theLibrary": {
        "version": "https:.....",
         "integrity": ".....
    },
    ......
}

npm命令

npm install theLibrary

vuejs：第三方库中的“ this”是“ undefined”

1 个答案: