node_modules中Vue文件无法加载，疑为webpack的vue-loader配置问题

这个问题很典型——webpack默认不会对node_modules里的文件应用你的loader规则，而你直接导入了vuejs-paginate的源码.vue文件，导致vue-loader没处理它，最终JS引擎把<template>标签当成了无效语法，抛出了Unexpected token <错误。

下面是几个可行的解决方案，按推荐程度排序：

方案1：直接导入包的编译版本 #

大部分Vue组件库都会提供编译好的可用版本，不需要直接导入源码文件。试试把你的导入语句改成：

import Paginate from 'vuejs-paginate'

这样webpack会直接加载包内预编译好的JS文件，跳过源码解析步骤，大概率能直接解决问题。

方案2：让vue-loader处理第三方包的源码 #

如果必须导入源码文件（比如需要修改组件逻辑），你需要调整webpack配置，让vue-loader的规则覆盖vuejs-paginate的源码目录。

修改你的webpack配置文件，在vue-loader的规则里添加include项，把第三方包的源码路径加进去：

const path = require('path')

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: [
          path.resolve(__dirname, 'src'), // 保留你项目自身的.vue文件处理
          path.resolve(__dirname, 'node_modules/vuejs-paginate/src') // 新增：处理这个包的源码
        ]
      }
    ]
  }
}

这样webpack就会对vuejs-paginate/src下的.vue文件应用vue-loader，正确解析模板、脚本和样式。

方案3：检查vue-template-compiler版本 #

如果上面的方案都没生效，可能是vue-template-compiler和你项目中vue的版本不匹配导致的。Vue要求这两个包的版本必须完全一致，否则模板解析会出问题。

1. 先查看你当前vue的版本：

npm list vue

2. 安装对应版本的vue-template-compiler：

npm install vue-template-compiler@x.x.x --save-dev

把x.x.x替换成你查到的vue版本号。

为什么自定义组件能正常工作？因为你的webpack配置默认已经包含了项目src目录下的文件，vue-loader会处理这些.vue文件；但node_modules里的文件默认被loader规则排除了，所以第三方源码里的<template>标签没被编译，直接被JS引擎解析就报错了。

内容的提问来源于stack exchange，提问作者user345234674567