Question

我用vue-cli创建了一个简单的项目：vue init webpack myProject 它在myProject文件夹中创建了一组文件和文件夹，然后我使用npm run dev

运行项目

我的问题是，我想添加到我的src/components文件夹中。这是我的文件结构：

+ src
     + components
         + component1
            + index.js
            + component1.vue

index.js：

export { default } from './component1.vue';

component1.vue：

<template lang="pug">
    span this is my component
</template>

我找到build/webpack.base.conf.js文件并添加以下行：

resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
     vue$: 'vue/dist/vue.esm.js',
     '@': resolve('src'),
     components: path.resolve(__dirname, 'src/components'),
  },
},

然后我将其添加到我的App.vue

<script>

import Component1 from 'components/component';

export default {
  name: 'App',
  components: {
     'component1': Component1,
   },
};
</script>

导致错误消息：This dependency was not found 如何将components文件夹添加到我的webpack配置文件中？

Answer 1

这是你应该做的：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
      'core': resolve('src/components/core'),
      'common': resolve('src/components/common'),
      'mixin': resolve('src/components/common/mixin'),
      'private': resolve('src/components/private'),
      'public': resolve('src/components/public'),
      'services': resolve('src/services')
    }
  }

确保您的根文件夹名为 src 。

然后您可以直接从任何地方访问，例如：

import FormMixin from 'mixin/FormMixin'

Answer 2

文件webpack.base.conf.js中的

更改 components: path.resolve(__dirname, 'src/components')到components: resolve('src/components/component1') 和文件App.vue将import Component1 from 'components/component'更改为import Component1 from 'components/component1'

如何添加webpack配置的路径？

2 个答案: