开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Laravel Mix："npm run prod“失败，但"npm run watch”工作良好- React

Laravel Mix是Laravel框架中的一个前端构建工具，用于编译和打包前端资源。它基于Webpack，并提供了一种简化的配置方式，使开发者可以轻松地进行前端开发。

当执行命令"npm run prod"时，Laravel Mix会将前端资源进行优化和压缩，并生成适用于生产环境的文件。而执行命令"npm run watch"时，Laravel Mix会启动一个监听器，实时监测前端资源的变化，并自动重新编译。

如果在执行"npm run prod"时失败，但"npm run watch"工作良好，可能是由于以下原因之一：

缺少依赖：请确保项目中的依赖项已正确安装。可以尝试执行"npm install"命令来安装缺失的依赖。
配置错误：检查项目中的Laravel Mix配置文件（通常是webpack.mix.js），确保配置正确无误。特别注意是否有错误的路径或配置项。
资源文件错误：检查项目中的前端资源文件，如CSS、JavaScript等，确保文件没有语法错误或其他问题。
环境问题：有时候，特定的环境配置可能会导致"npm run prod"失败。可以尝试在不同的环境中运行命令，或者检查相关环境变量的设置。

对于以上问题，可以尝试以下解决方案：

确保项目中的依赖项已正确安装，可以执行"npm install"命令来安装缺失的依赖。
检查Laravel Mix配置文件（webpack.mix.js），确保配置正确无误。
检查前端资源文件，确保文件没有语法错误或其他问题。

如果问题仍然存在，可以尝试以下方法：

清除缓存：执行"npm run prod"之前，可以尝试执行"npm run clean"命令来清除缓存。
重建依赖：有时候，依赖项可能存在问题，可以尝试删除node_modules文件夹，并重新执行"npm install"来重新安装依赖。
更新工具：确保使用的Laravel Mix版本和相关工具（如Webpack）是最新的，可以尝试更新这些工具。

总结：当"npm run prod"失败但"npm run watch"工作良好时，可能是由于缺少依赖、配置错误、资源文件错误或环境问题所致。可以通过安装依赖、检查配置、检查资源文件、清除缓存、重建依赖、更新工具等方法来解决问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mobile
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/mu

相关搜索:npm run build -尽管开发版本运行良好，但编译失败 npm run watch停止工作-带有Vue.js的Laravel 为什么'npm run watch‘在laravel中出现错误？Laravel vue js npm run watch只能运行一次如何在服务器上为laravel项目运行"npm run watch“？只有在npm run watch laravel 5.8之后才会加载app.js Laravel - npm run watch在Lara 7、Node: v10.15.0和NPM: v6.5.0上不起作用模块构建失败(从./node_modules/babel-loader/lib/index.js) -尝试运行npm run dev for laravel mix 运行npm react-native run-android时发生突然错误。任务:应用程序:processDebugResources失败样式在本地工作，但当在带有tailwindcss的react应用程序上运行` `npm run build`时，样式未正确应用使用vite和typescript编译器构建时，使用three.js/react/vite创建的项目会中断，但使用npm run dev (dev server)可以正常工作。

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在 Laravel 项目中使用 webpack-encore

看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉，有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。...正所谓爱之深，责之切，在对 laravel-mix 表示失望之后，我翻出了自己 star 多时的另一包 webpack-encore，虽说很早就 star 了，但之前却没试用过它，可能也是因为对于 laravel-mix...为此你需要在 Laravel 项目中自行实现这两方法，下面是我参考 symfony 里相关源码改写的，可能逻辑上并不算完善，但以自己一个多月的使用情况来看，它们表现良好。...NODE_ENV=development encore dev", "watch": "npm run development -- --watch", "watch-poll": "...npm run watch -- --watch-poll", "hot": "encore dev-server --port=9001 --hot", "prod": "npm run

2.1K2 0

Laravel Mix 初探

Laravel 上面的安装 Laravel 5.4 以上默认已经安装了 Laravel Mix，在开发机配置了node 和 npm的基础上，仅仅只需要运行下面的命令即可安装： npm install...npm run watch 基本和npm run dev构建出来的文件一样，但是可以监测到静态资源文件的变化并且自动构建更新静态资源。...npm run watch 命令的时候 Browsersync 会启动一个localhost:3000的服务。...npm run production 将编译我们所有的静态资源，并产生一个生产就绪的构建。它将运行所有的Mix 任务，并且会压缩文件输出。...默认前端框架还是 Vue，如果想切换到 React : php artisan preset react 配置 postCss例子例如需要配置 Laravel mix 初探 /\*\* - postCss

4.3K6 0

在 Laravel 项目中使用 Bootstrap 框架

dev 编译前端资源接下来，我们就可以运行 npm run dev 命令通过 Laravel Mix 来编译前端资源了，该命令定义在 package.json 中：该命令最终运行的是 npm run...development 命令，意为在开发环境对前端资源进行编译，如果需要的话你可以在这里对命令参数进行修改，如果是在生产环境，需要运行 npm run prod 命令，如果在开发环境中想要修改文件后自动编译资源可以运行...npm run watch 命令。...app.scss 中编写代码，引入其它模块，然后运行 npm run dev 就可以了，无需任何额外配置。...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js： const mix = require('laravel-mix'); mix.js('resources/js/

3.4K3 1

Laravel中安装使用Vue

切换到laravel工作目录,运行npm install初始化下载package.json的包 sudo npm install #liunx以root执行命令 npm install...#windows以管理员身份运行cmd并切换到laravel工作目录监听项目变化从而重新编译程序 npm run watch #监听项目变化从而重新编译程序...\blog > npm run development -- --watch > @ development C:\Users\Administrator\Desktop\laravwe...NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix...--该组键就是在resource/js/app.js里注册的组键,实际位置在resource/js/components--> @endsection 前面说过的,npm run watch

8601 0

webpack构建优化：bundle体积从3M到400k之路

--progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", //开发环境生成 app.js...--hide-modules --config=webpack.app.config.js", "watch-poll": "npm run watch -- --watch-poll",...development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix.../setup/webpack.config.js", "prod": "npm run production", //生成环境打包 app.js及页面js "production...run watch，Webpack会自动打开浏览器，在127.0.0.1:8888上显示如下： image.png ps: npm run watch 对应的配置文件webpack.app.config.js

4K5 0

Homestead + laravel-mix 环境下 hmr 的两种玩法

我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法，其中就有涉及 hmr（Hot Module Replacement...），但里面都是以 Laradock 环境为例。...在虚拟机终端中执行yarn run hot，然后在浏览器中使用绑定的测试域名（如：laravel.test）访问 34.修改 JS 等，自动编译后浏览器中页面即自动更新玩法二：使用宿主机中的 Node...（虽然可以考虑在宿主机全局安装依赖，但诸如 eslint-config-xxx 之类的项目相关的包也全局安装，必然造成混乱）如同学习很多其它新工具新玩法一样，刚开始折腾 laravel-mix 时总是磕磕绊绊...(有不少坑），但一旦掌握了窍门，就能极大的方便日常开发，提高工作效率。

1.6K1 0

【玩转腾讯云】已有laravel 添加vue

'); require('laravel-elixir-webpack-official'); require('laravel-elixir-vue-2') elixir((mix) => { mix.sass...('app.scss') .webpack('app.js'); }); webpack.mix.js let mix = require('laravel-mix'); mix.js('.../page/Detail.vue') }]; a php artisan serve npm run watch Error: Can't resolve 'vue-route' in cnpm install...run watch 会报错缺少插件，类似这种安装 cnpm install postcss-viewport-units --save-dev vue加载优化安装： cnpm install -...run dev 参考： https://learnku.com/articles/9054/laravel55-vue-development-single-page-application https

3.6K3 0

laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

生成key，命令行：PHP artisan key:generate 5.配置文件package.json，内容如下： { "private": true, "scripts": { "prod...": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "babel-core": "^6.20.0...vue-template-compiler": "^2.1.4", "axios": "^0.15.2", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.0", "laravel-mix..., "lodash": "^4.16.2" }, "dependencies": {} } 6.命令行（没有npm...') }); 11.命令行（没有gulp,自行下载）：gulp watch 关于laravel中使用gulp Elixir编辑前端资源也可以参考：https://onlyke.com/html/665.

1.6K3 0

npm脚本和package.json

1、什么是npm脚本　　在创建node.js项目如一个vue项目，或一个react项目时，项目都会生成一个描述文件package.json 。...npm脚本的退出码，也遵守shell脚本规则。如果退出码不是0，npm 就认为这个脚本执行失败。 3、通配符　　由于npm脚本就是shell脚本，因此可以使用shell通配符。...npm run prebuild && npm run build && npm run postbuild 　　因此，可以在这两个钩子里面，完成一些准备工作和清理工作。...:css": "watch 'npm run build:css' assets/styles/", // 只要 HTML 文件有变动，就重新执行构建 "watch:html": "watch 'npm...run build:html' assets/html", // 部署到 Amazon S3 "deploy:prod": "s3-cli sync .

1.8K2 0

在群晖docker上装elmlang可视调试编码器ellie

中运行，而在prod中前后端整合到了elixir image下,它们最大的区别是，dev环境下的webpack需要附加express 8080持续运行(npm run watch)，而prod模式下，一次...webpack build就行了(npm run build)，不要持续运行。...run graphql \ && npm run build 至此，生成构建了所有项目运行时的资源。...准备ENV预定义的参数，docker run时会欠入到实例： ----- ENV MIX_ENV=prod \ NODE_ENV=production \ PORT=4000 \...chmod +x /tmp2/run.sh ENTRYPOINT ["/tmp2/run.sh"] 这个run.sh是分离postgresql所在容器和ellie所在容器的entrypoint，所有连接数据库初始化的工作都要在这里完成

1.2K6 0

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

run dev 一下即可 3.Element-ui 安装我们可以去 Element-ui 官方文档查看安装教程，也就是简单的npm 安装一下 npm i element-ui -S //安装Element-ui...run dev 编译一下，即可 5..../node_modules/laravel-mix/src/index和 ..../node_modules/laravel-mix/src/index'); // 修改路径 require(Mix.paths.mix()); /** * Just in case the user...run dev 编译后即可 6.

1.4K2 0

页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面

基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中，我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，开始之前，先安装 laravel-mix-tailwind...这个前端依赖包： npm install laravel-mix-tailwind --save-dev 安装完成后，需要在项目根目录下的 webpack.mix.js 中引入它： const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......(); 由于 laravel-mix-tailwind 依赖 tailwind.js，所以还需要通过如下命令初始化 Tailwind： npx tailwindcss init 如果上述命令运行报错...run watch 编译成功，则表明 Tailwind CSS 框架已正常引入。

2.7K2 0

【Laravel系列7.8】广播系统

npm install -g laravel-echo-server 安装完成后进行初始化。...laravel-echo-server.json Configuration file saved. Run laravel-echo-server start to run server....Channel: messages Event: App\Events\Messages 至此，服务端的工作全部完成。...npm run dev 执行完编译之后，我们就可以写一个前端页面来进行测试了。在这个页面中，直接引用 app.js 文件即可。...npm run dev 现在你再打开我们的前端测试页面，就可以看到一个 WebSocket 连接已经建立了，之前那个 http 连接也不会一直轮询了。这种情况，才是正常的情况。

2.3K2 0

引入 Laravel Mix 管理前端资源

如果要完整介绍并构建这样的一套前端开发环境，需要引入很多额外的篇幅和前端知识，好在 Laravel 生态提供了一个 Laravel Mix 组件，该组件对 Webpack 的构建步骤做了封装，提供了一套非常简单的流式...虽然该项目是针对 Laravel 框架开发的，不过，由于是一个纯前端项目，因此可以适用于所有 Web 前端项目，现在，我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前，需要先安装 Laravel Mix 组件需要的前端相关依赖，假设你的系统上已经安装过 Node 和 NPM 包管理器，如果没有安装的话前往 Node.js 官方下载页面...": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin...这样一来，我们就可以在项目中基于 Laravel Mix 管理前端资源了。下篇教程，我们将基于 Laravel Mix 为博客项目替换主题。（全文完）

1.6K2 0

kiali-ui的自定义UI开发

run build:prod; else npm run build:dev; fi", "build-css": "node-sass src/ --output-style compressed...; npm run lint && npm run build:kiali'", "build:kiali": "npm run build-css && REACT_APP_VERSION=$...: "if [ \"${KIALI_ENV}\" = \"production\" ]; then npm run start:prod; else npm run start:dev; fi",...&& REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_GIT_HASH=$(git...rev-parse HEAD) react-scripts start", "start:prod": "sh -ac 'source ./.env.downstream; npm run start

4741 0

Webpack 实战入门系列（三）：生产配置、样式文件分离及输出清理

"build": "webpack --config webpack.prod.js" 然后可以运行下npm run dev看下效果，没问题 ?...再运行下npm run build打包，也是没问题的。...这样即进行了环境区分，而且公共配置被抽离，实现了互不干扰也不会增加工作量。...然后运行npm run build，看下效果。结果报错了：CleanWebpackPlugin is not a constructor。 ?...修改好后，再运行npm run build就可以看到效果了，dist目录下之前的文件删除了，生成了新文件。

7972 0

通过 Laravel 创建一个 Vue 单页面应用（一）

安装首先我们会创建一个 Laravel 项目，然后再安装 Vue 的 NPM 路由包： laravel new vue-router cd vue-router # 当使用 Valet 时，建立项目链接...为了让 Laravel mix 成功运行，我们需要定义如下三个组件： mkdir resources/assets/js/views touch resources/assets/js/views/App.vue...运行项目自此，我们完成了一个使用 Vue 和 Vue Router 的 SPA 应用的基本框架，接下来让我们通过运行 JavaScript 让它显示出来： yarn watch # 或 npm run...watch 当我们在浏览器中输入对应 URL 时，将会看到如下页面：下一步我们已经建立起了一个使用 Laravel 作为 API 层的 Vue SPA 应用的骨架。...但这个应用仍有很多功能需要我们在后续的教程中来实现：在前端定义一个 404 路由使用路由参数子路由在组件中向 Laravel 发起一个 API 请求可能还有很多，但我不准备全部列在这里...

4.3K2 0

npm scripts 使用指南

npm 脚本的退出码，也遵守 Shell 脚本规则。如果退出码不是0，npm 就认为这个脚本执行失败。三、通配符由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。...npm run prebuild && npm run build && npm run postbuild 因此，可以在这两个钩子里面，完成一些准备工作和清理工作。下面是一个例子。...:css": "watch 'npm run build:css' assets/styles/", // 只要 HTML 文件有变动，就重新执行构建 "watch:html": "watch 'npm...run build:html' assets/html", // 部署到 Amazon S3 "deploy:prod": "s3-cli sync ..../dist/ s3://example-com/prod-site/", // 构建 favicon "build:favicon": "node scripts/favicon.js", 十一、参考链接

1.2K7 0

一首歌时间将React Vue 应用Docker 化

将Web目录作为工作目录 WORKDIR /web # 将package.json 复制到 Docker 环境 COPY ....运行Docker + React/Vue 现在，使用以下docker run命令, 通过Docker在端口3000上运行React应用。...ci 或 npm install # http://www.gaoxiukun.com/wp/archives/509 RUN npm ci # React 应用需要react-script RUN...npm install react-scripts@3.4.1 -g COPY . ./ RUN npm run build # 安装nginx FROM nginx:1.17-alpine RUN...接下来执行docker run docker run -it --rm -p 3000:80 sample:prod -i: 以交互模式运行容器。

9562 0

npm scripts的使用

npm 脚本的退出码，也遵守 Shell 脚本规则。如果退出码不是0，npm 就认为这个脚本执行失败。三、通配符由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。...npm run prebuild && npm run build && npm run postbuild 因此，可以在这两个钩子里面，完成一些准备工作和清理工作。下面是一个例子。...:css": "watch 'npm run build:css' assets/styles/", // 只要 HTML 文件有变动，就重新执行构建 "watch:html": "watch 'npm...run build:html' assets/html", // 部署到 Amazon S3 "deploy:prod": "s3-cli sync ..../dist/ s3://example-com/prod-site/", // 构建 favicon "build:favicon": "node scripts/favicon.js", 十一、参考链接

8602 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭