Vue项目使用Vite构建工具执行npm run serve时先后出现Missing script: "serve"与Cannot GET /错误的问题咨询

嘿，我来帮你把这几个问题捋清楚——你踩的坑其实主要是搞混了Vue CLI和Vite的命令逻辑，咱们一步步来解决：

一、先搞懂核心差异：Vue CLI vs Vite的命令区别 #

首先得明确：Vue CLI用npm run serve启动开发服务器，但Vite的开发启动命令默认是npm run dev，而vite preview是用来预览生产构建好的静态文件的，不是用来启动开发环境的！这就是你配置"serve": "vite preview"后依然报错的根本原因。

二、逐个解决你的问题 #

1. 解决Vite项目的Missing script: "serve"和Cannot GET /

如果你的项目已经切换到Vite，正确的配置和操作应该是这样：

• 打开项目根目录的package.json，把你加的"serve": "vite preview"改成开发环境启动命令：

  "scripts": {
    "serve": "vite", // 这样你就能用习惯的npm run serve启动开发服务器了
    "build": "vite build", // 打包生产环境代码到dist目录
    "preview": "vite preview" // 预览打包后的代码（必须先执行build）
  }
  

• 为什么之前用vite preview会出Cannot GET /？因为这个命令是读取dist目录下的静态文件来预览的，如果你没先执行npm run build生成dist，服务器找不到任何资源，自然会返回这个错误。

2. 解决原始Vue CLI项目的Cannot GET错误

如果你的初始项目是用Vue CLI创建的，执行npm run serve出现Cannot GET，通常有这几个常见原因：

• 路由模式问题：如果你的路由用了history模式，本地开发需要配置路由 fallback，否则刷新页面会出现这个错误。在项目根目录的vue.config.js里添加配置：

  module.exports = {
    devServer: {
      historyApiFallback: true
    }
  }
  

• 依赖或文件结构异常：试试删除node_modules和package-lock.json，然后重新执行npm install，再启动项目；同时检查src/App.vue、src/main.js这些核心入口文件是否存在且配置正确。

三、快速操作指南 #

• 若使用Vite：
  1. 配置package.json的scripts，让serve指向vite
  2. 执行npm run serve启动开发服务器，就能正常访问了
  3. 要预览生产包，先跑npm run build，再执行npm run preview
• 若使用Vue CLI：
  1. 检查路由模式，开启historyApiFallback
  2. 重新安装依赖，确保核心文件完整

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