Vue CLI报错400，开发中服务器指令应用

在学习和练习vue的过程中，在浏览器中预览时遇到了控制台报错：项目未能加载资源400

详细内容为vueURIError: URI malformed

东拼西凑的看了很多教程，都没有解决，结果竟然是混淆了两个服务器相关的指令：

npm run serve

npm install http-server -g

接下来记录两个指令的用处和区别：

1.npm run serve：

这是一个通过 npm（Node.js 包管理器）运行的自定义命令。在大多数现代前端项目中，特别是基于 Vue.js、React、Angular 等框架的项目中，通常使用这个命令来启动开发服务器。在 package.json 文件中，可以定义一个脚本，例如：

"scripts": {
  "serve": "vue-cli-service serve"
}

这样一来，当你运行 npm run serve 时，实际上是在启动一个本地开发服务器，用于开发阶段预览和测试你的前端应用程序。

2.npm install http-server -g：

这个命令用于全局安装一个叫做 http-server 的 Node.js 包。http-server 是一个简单的零配置的命令行 HTTP 服务器。它允许你快速地在任何目录中启动一个静态文件服务器，以便于共享和测试 HTML、JavaScript 和其他静态资源。

全局安装 http-server 后，你可以在命令行中直接运行 http-server 命令来启动一个简单的 HTTP 服务器。例如：

http-server

这会在当前目录下启动一个服务器，默认监听在 http://localhost:8080 上，并将当前目录作为静态资源目录提供服务。

区别：

npm run serve 是运行项目中预先配置好的开发服务器，通常由项目的构建工具（比如 Vue CLI、Create React App 等）提供支持。

http-server 是一个单独的工具，用于启动一个简单的静态文件服务器，不需要任何额外的配置。

总结来说，npm run serve 更多用于前端项目开发时快速启动和调试，而 http-server 则是一个通用的工具，用于快速分享静态文件或测试本地的静态网页。