当依赖包含.vue文件时，vue-styleguidist错误

Question

我正在使用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。

Answer 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
})