Laravel环境下Vue组件导入JSON文件报错的解决咨询

刚碰到过类似的坑，你这个Module not found报错主要是webpack没法正确定位你的JSON文件，或者缺少必要的配置支持，给你几个一步步排查的办法：

1. 先把导入路径改对 #

从报错路径看，你的App.vue在/var/www/html/mac/resources/assets/src/下面，先确认你的incomingData.json到底在哪：

• 如果JSON和App.vue在同一个src文件夹里，把导入路径改成相对路径（开头加./）：

  import jsonData from './incomingData.json'
  

• 如果JSON是在src/assets子文件夹里，路径要写成：

  import jsonData from './assets/incomingData.json'
  

（别漏了开头的./，webpack默认不会自动找当前目录的相对路径，直接写assets/xxx会被当成node_modules里的包）

2. 确认webpack支持JSON解析 #

Laravel Mix默认是支持JSON导入的，但如果你的webpack配置被改过，可能需要手动补全loader：
首先安装json-loader（如果还没装的话）：

npm install json-loader --save-dev

然后在项目根目录的webpack.mix.js里添加配置：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader',
        type: 'javascript/auto'
      }
    ]
  }
});

3. 检查文件名和路径的大小写 #

你的服务器是Linux系统，路径和文件名是严格区分大小写的！比如IncomingData.json和incomingData.json是两个完全不同的文件，Assets和assets也是不同的文件夹，仔细核对一遍。

4. 清缓存重新编译 #

有时候webpack的缓存会抽风，导致路径解析异常，执行下面的命令清缓存再重新打包：

npm run clean
npm run dev

如果用的是Laravel Mix的watch模式，也可以先停掉进程，再重新跑npm run watch。

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