Laravel中如何在app.js添加Vue组件？解决require报错及webpack疑问

首先说为什么你会遇到require is not defined的问题 #

你在教程里看到的Vue.component('articles', require('./components/articles.vue'))，是**在未打包的源文件（比如resources/js/app.js）**里写的代码，Laravel背后的Webpack（通过Laravel Mix封装）会在打包时把require转换成它内部的__webpack_require方法，所以浏览器能正常识别。

但你如果是直接往已经打包好的public/js/app.js里加这段代码，浏览器环境根本没有全局的require函数，自然会报错。正确的操作步骤应该是：

• 打开你的源app.js文件（一般在resources/js/app.js）
• 在里面添加：Vue.component('articles', require('./components/articles.vue').default);（注意加.default，因为Vue单文件组件默认是导出默认模块）
• 运行npm run dev或者npm run watch重新打包，Webpack会自动把这段代码转换成浏览器能识别的格式，就不会报错了。

再说说Webpack生成的数字模块ID（比如37）怎么对应到文件 #

那个37是Webpack打包时自动给每个模块分配的内部标识ID，它完全是Webpack自己生成的，每次打包（比如改了代码重新编译）这个数字都可能变，所以绝对不要手动写__webpack_require__(37)这种代码——这都是Webpack自动处理的。

要找到数字对应的文件，即使没有Webpack CLI也有办法：

• 开发环境下直接查控制台：运行npm run watch或者npm run hot开启开发模式，打开浏览器开发者工具的Sources面板，找到webpack://目录，里面是所有源文件。你也可以在控制台输入__webpack_require__.m[37]（把37换成你要查的数字），就能看到这个模块的源码或路径信息。
• 生成Webpack Stats文件：在webpack.mix.js里加一段配置：

  mix.webpackConfig({
    stats: {
      modules: true,
      moduleTrace: true
    }
  });
  

  然后运行npm run dev，项目根目录会生成stats.json，搜索你要找的数字ID，就能看到对应的文件路径和详细模块信息。
• 其实你根本不用关心这个数字：在源文件里，你只需要用require('./components/ExampleComponent.vue')或者ES6的import ExampleComponent from './components/ExampleComponent.vue'，然后Vue.component('example-component', ExampleComponent)就好，Webpack会自动帮你转换成对应的__webpack_require调用，完全不用手动管数字ID的事。

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