Vue CLI项目无法读取vue.config.js配置文件求助

看起来你遇到的问题是Vue CLI完全忽略了你的vue.config.js配置文件，连console.log都没有输出，这大概率是几个常见配置问题导致的，咱们一步步排查：

1. 检查vue.config.js的位置是否正确 #

vue.config.js必须放在项目根目录，也就是和你的package.json文件同级的位置。如果它被放在了src或者其他子目录里，Vue CLI是找不到它的。你可以先确认一下文件路径是否正确。

2. 修复package.json中的"main"字段 #

我注意到你的package.json里"main": "babel.config.js"，这不符合Vue CLI项目的规范。正常情况下，这个字段应该指向你的应用入口文件src/main.js。这个错误可能会导致Vue CLI无法正确识别项目结构，从而忽略vue.config.js。

修改package.json的main字段：

"main": "src/main.js",

3. 清除缓存并重启开发服务 #

有时候Vue CLI会缓存旧的配置，即使你修改了vue.config.js也不会生效。你可以按以下步骤操作：

• 按Ctrl+C终止当前运行的vue-cli-service serve进程
• 删除项目根目录下的node_modules/.cache目录（如果存在）
• 重新启动服务：执行yarn serve或者npm run serve

4. 验证配置是否生效 #

修改完以上内容后，你可以在vue.config.js里加一个测试日志来确认：

const path = require('path')
console.log('vue.config.js 已成功加载！') // 测试用日志
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@vue-toggle-component': path.resolve(__dirname, 'src/components')
      }
    }
  }
}

重启服务后，如果控制台输出了vue.config.js 已成功加载！，说明配置文件已经被正确读取了。之后你就可以正常使用路径别名，比如在组件里这样引用：

import Toggle from '@vue-toggle-component/Toggle.vue'

额外提示：如果还是不生效 #

如果以上步骤都试过了还是不行，你可以尝试重新安装依赖：

rm -rf node_modules
rm package-lock.json # 如果你用npm的话；用yarn就删除yarn.lock
npm install # 或者 yarn install

然后再重启服务。

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