依赖项包含 .vue 文件时出现 vue-styleguidist 错误答案

【问题标题】：vue-styleguidist error when dependency contains a .vue file依赖项包含 .vue 文件时出现 vue-styleguidist 错误
【发布时间】：2017-11-16 13:39:55
【问题描述】：

我正在使用 vue-styleguidist 为 VueJS 组件生成文档。

这通常工作得很好，但在这种情况下我得到一个错误：

./node_modules/vue-awesome/components/Icon.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
 <template>
   <svg version="1.1"
     :class="klass"

Learn how to add webpack loaders to your style guide:
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Webpack.md

我的 vue-styleguidist 配置文件 (styleguide.config.js) 包含加载 webpack 文件的默认规则：

const loaders = require('vue-webpack-loaders');

module.exports = {
  ...
  webpackConfig: {
    module: {
      loaders,
    },
    ...
  },
  ...
};

其他 .vue 文件加载正确，但 Icon.vue 加载不正确。

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

问题是 vue-webpack-loaders 提供的默认 webpack 加载规则明确排除了 mode_modules 目录，但是 npm 模块包含那个 Vue 文件 Icon.vue。

{
    test: /\.vue$/,
    exclude: /node_modules/,
    loader: 'vue-loader',
    options: vueLoaderConfig
},

解决方案是在默认规则中添加一个额外的规则，专门在 node_modules 下加载该文件。

const loaders = require('vue-webpack-loaders');

var vueLoaderConfig = require('vue-webpack-loaders/lib/vue-loader.conf')
loaders.push({
  test: /vue-awesome\/components\/Icon\.vue$/,   <-- path to .vue file
  loader: 'vue-loader',
  options: vueLoaderConfig
})

【讨论】：