1

我是 Vue.js + Webpack 世界的新手，一直在尝试消化这么多信息。

无法弄清楚为什么当我从 npm 包（一个 vue.js 模板）导入单个 .vue 文件以在我的应用程序上使用时，webpack 会尝试从模板包本身解决依赖关系。我只将文件导入到我的应用程序中，它沿着包的配置传播。

这里的步骤：

$ vue create myproject
$ cd myproject
$ yarn add @coreui/vue
$ yarn serve

然后在 myproject 内的 App.vue 上：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Footer />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Footer from '@coreui/vue/Vue_Full_Project/src/components/Footer.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    Footer
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

位于 CoreUI/Vue 包内的 Footer.vue 非常简单，包含以下内容：

<template>
  <footer class="app-footer">
    <span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
    <span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
  </footer>
</template>

<script>
export default {
  name: 'c-footer'
}
</script>

但我明白了：

 error  in ./node_modules/@coreui/vue/Vue_Full_Project/src/components/Footer.vue

Module build failed: Error: Cannot find module 'babel-plugin-transform-runtime' from '/tmp/myproject/node_modules/@coreui/vue/Vue_Full_Project'
- Did you mean "@babel/transform-runtime"?
    at Function.module.exports [as sync] (/tmp/myproject/node_modules/resolve/lib/sync.js:42:15)
    at resolveStandardizedName (/tmp/myproject/node_modules/@babel/core/lib/config/files/plugins.js:104:31)
    at resolvePlugin (/tmp/myproject/node_modules/@babel/core/lib/config/files/plugins.js:53:10)
    at loadPlugin (/tmp/myproject/node_modules/@babel/core/lib/config/files/plugins.js:61:18)
    at createDescriptor (/tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:154:21)
    at /tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:106:12
    at Array.map (<anonymous>)
    at createDescriptors (/tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:105:27)
    at createPluginDescriptors (/tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at /tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:52:19

 @ ./node_modules/@coreui/vue/Vue_Full_Project/src/components/Footer.vue 3:0-188 4:0-201
 @ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/tmp/myproject/node_modules/.cache/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

如果我将单个文件 Footer.vue 复制到 myproject/src 文件夹并将导入语句更新为“./Footer.vue”，它就可以工作。

如果我从未引用模板包中的任何内容，而不是我的“导入”语句中的单个独立文件，为什么 webpack 会尝试解析模板包中的依赖项？

我应该如何以这种方式在我的应用程序中使用这样的模板？

谢谢

4

0 回答 0