如何将路径添加到 webpack 配置？答案

【问题标题】：How to add a path to webpack config?如何将路径添加到 webpack 配置？
【发布时间】：2018-01-25 20:12:13
【问题描述】：

我用 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 配置文件中？

【问题讨论】：

标签： webpack vue.js

【解决方案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'

【讨论】：

【解决方案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'

【讨论】：