通过script标签引入Vue/Vue Router时如何使用Webpack打包？

嗨，我来帮你捋捋这个问题的解决思路～

首先得搞明白为什么会出现「缺少vue-loader」的提示：Webpack在打包过程中，如果检测到项目里有.vue后缀的单文件组件，会自动尝试寻找vue-loader来处理这类文件，但你的环境没法安装这个依赖，所以就报错了。接下来分两种场景给你解决方案：

场景1：你没有使用.vue单文件组件 #

这种情况的问题大概率出在Webpack配置或代码引入上，按下面步骤调整：

• 先检查项目代码，确保没有导入任何.vue格式的文件
• 打开webpack.config.js，移除所有和vue-loader相关的配置规则（比如module.rules里针对.vue的处理规则）
• 确认externals的配置是否正确，要让Webpack把Vue和Vue Router当作全局变量来使用，正确配置示例：

  module.exports = {
    // ...其他Webpack配置项
    externals: {
      vue: 'Vue', // 对应你通过script引入的全局window.Vue
      'vue-router': 'VueRouter' // 对应全局window.VueRouter
    }
  }
  

这样Webpack打包时就不会尝试打包Vue和Vue Router，而是直接用你通过script标签引入的全局变量，同时也不会触发对vue-loader的依赖需求。

场景2：你需要使用.vue单文件组件 #

这种情况因为.vue文件需要编译，而你没法安装vue-loader，可以试试这些替代方案：

• 确保引入带编译器的Vue版本：你通过script引入的vue.js必须是包含模板编译器的完整版本（不是runtime-only精简版），这样Vue才能在浏览器端直接编译模板
• 拆分.vue文件：把单文件组件拆成单独的JS、CSS和HTML片段，比如模板写在index.html的<template>标签里，或者用字符串模板，样式直接写在全局style标签中，这样就不需要vue-loader来处理编译了
• 排查内部源资源：问问团队有没有内部维护的vue-loader镜像包，或者已经预编译好的组件库可以直接引入

另外要注意：如果你的代码里用import Vue from 'vue'或import VueRouter from 'vue-router'，一定要保证externals里的key和你import的模块名完全一致，这样Webpack才能正确把导入映射到全局变量。

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