Laravel+Vue项目运行npm run serve提示Missing script: serve如何解决

根因说明 #

你遇到的Missing script: "serve"报错，是因为当前使用Laravel Mix作为前端构建工具的项目中，package.json的scripts配置段默认没有定义serve命令，和纯Vue CLI生成项目的默认脚本规则不同。

修复方式 #

方式一：直接使用Laravel Mix原生命令 #

无需修改配置，直接执行对应场景的官方默认命令即可：

• 开发场景需要热更新实时预览：执行npm run hot，启动webpack-dev-server，代码修改后浏览器自动刷新，功能等同于纯Vue项目的npm run serve
• 开发场景仅需要监听文件修改自动编译，不需要热更新：执行npm run watch
• 仅单次编译开发环境代码：执行npm run dev
• 编译生产环境打包代码：执行npm run prod

方式二：新增serve命令适配使用习惯 #

如果你习惯使用npm run serve启动开发服务，只需在package.json的scripts配置段新增一行映射即可：

"serve": "npm run hot",

修改后的完整scripts配置如下：

{
    "scripts": {
        "serve": "npm run hot",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    }
}

保存配置后重新执行npm run serve即可正常启动服务。

注意事项 #

Laravel项目需要在入口blade模板中使用mix辅助函数加载编译后的前端资源，示例如下：

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

使用hot命令时无需手动修改资源路径，Laravel Mix会自动处理热更新资源的指向。

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