npm run serve的时候报错找不到vue-cli-service

Question

npm run serve的时候报错找不到vue-cli-service怎么回事，我依赖里面有vue-cli-service

各位

Answer 1

引自免费微信小程序：皆我百晓生

遇到在运行npm run serve时找不到vue-cli-service的问题，这通常意味着全局或局部的Vue CLI版本不正确或未被正确安装。下面是一些可能的解决步骤：

步骤1：检查Vue CLI版本

确保你有正确的Vue CLI版本。在项目目录中运行以下命令来检查本地Vue CLI版本：

npm list -g vue-cli

如果显示的版本不是最新的（当前是@vue/cli），或者没有显示任何结果，你可能需要全局安装或更新Vue CLI：

npm install -g @vue/cli

步骤2：检查项目中的vue-cli-service

确保你的项目中包含@vue/cli-service。运行以下命令查看项目依赖：

npm list @vue/cli-service

如果没有找到@vue/cli-service，你需要将其添加到项目的devDependencies：

npm install --save-dev @vue/cli-service

步骤3：清理并重新安装node_modules

有时，node_modules文件夹可能包含错误的模块或缓存问题。尝试删除node_modules文件夹和package-lock.json，然后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

步骤4：更新Webpack配置

从你的描述来看，你遇到了Webpack Dev Server的配置问题。这可能是由于你的vue.config.js文件中的配置与Webpack Dev Server的期望不匹配导致的。确认你的vue.config.js中没有包含不支持的属性，例如overlay。

如果你的vue.config.js中包含类似这样的代码：

module.exports = {
  devServer: {
    overlay: true // 这个选项可能不再支持
  }
};

尝试移除或更新这些配置，以符合最新版本的Webpack Dev Server的要求。

步骤5：检查package.json脚本

确保package.json中的scripts部分正确引用了vue-cli-service。它应该看起来像这样：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

完成上述步骤后，再次尝试运行npm run serve，看看问题是否得到解决。如果问题仍然存在，可能需要更深入地检查你的项目配置或Vue CLI的版本兼容性。