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

依赖项包含.vue文件时{vue-styleguidist}

1 个答案: