Question

我正在尝试在TGZ之外包括一个第三方库。这些是package.json文件，其中包含已转译的（可能是）最小化的代码。

在"dependencies": { ... "coolstuff":"file:./3rd-party/coolstuff.tgz", "coolstuff-vue2":"file:./3rd-party/coolstuff-vue2.tgz" },中，我对它们的引用如下：

import CoolStuff from 'coolstuff'

并按如下所示导入它：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <CoolStuff>
   <CStuff> at src/components/imported/Feature.vue
     <MyStuff> at src/internal/my-stuff.vue
       <VContent>
         <VApp>
           <App> at src/App.vue
             <Root>

[Vue warn]: Error in mounted hook: "TypeError: coolstuff__WEBPACK_IMPORTED_MODULE_0___default.a.ready is not a function"

found in

---> <MyStuff> at src/internal/my-stuff.vue
   <VContent>
     <VApp>
       <App> at src/App.vue
         <Root>

TypeError: coolstuff__WEBPACK_IMPORTED_MODULE_0___default.a.ready is not a function
    at VueComponent.mounted (my-stuff.vue?56e8:38)
    at callHook (vue.runtime.esm.js?2b0e:3025)
    at Object.insert (vue.runtime.esm.js?2b0e:4247)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6063)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6282)
    at Vue._update (vue.runtime.esm.js?2b0e:2765)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:2886)
    at Watcher.get (vue.runtime.esm.js?2b0e:3256)
    at new Watcher (vue.runtime.esm.js?2b0e:3245)
    at mountComponent (vue.runtime.esm.js?2b0e:2893)

似乎可以构建，但是当我运行它时，它看起来很糟糕，无法正常运行，并且有以下Vue控制台日志：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  border: 1px solid green;
  max-width: 400px;
}

.search-input {
  display: flex;
  flex-flow: row nowrap;
  height: 40px;
  border: 1px solid red;
  background-color: white;
  font-size: 18px;
  line-height: 1;
}

.search-field {
  flex: auto;
  border: none;
  padding: 10px;
}

.search-button {
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  border: none;
  background: transparent;
}

所有这些问题都与之相关吗？

“将模板预编译为渲染函数，或使用包含编译器的内部版本”是什么意思？我在网上搜索，在十个示例中，有十个不同的解决方案，但没有一个起作用。

有没有办法解决这个问题？

Answer 1

我认为它们没有关系。

对于第一个警告，请将其放在vue.config.js中（如果文件不存在，则可以创建该文件）：

module.exports = {
    runtimeCompiler: true
}

对于其他两个，似乎在ready中有一个函数coolstuff被调用，它不是一个函数，可能在它周围加上一些保护代码，例如

if (typeof coolstuff.ready == 'function') {
   // your code here
} else {
   // error handling here
}

导入外部内容时出现问题

1 个答案: