开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

只有在npm run watch laravel 5.8之后才会加载app.js

在npm run watch laravel 5.8之后，会加载app.js。这是因为npm是Node.js的包管理工具，可以用来安装、升级、卸载和管理项目中的依赖包。npm run watch是运行项目中定义的脚本命令，laravel 5.8是指使用Laravel框架的版本号。

在Laravel框架中，app.js是前端资源文件的入口文件，用于加载和管理前端的JavaScript代码。通过运行npm run watch命令，可以实时监测前端资源文件的变化，并自动重新编译和加载这些文件，以便在开发过程中及时查看修改的效果。

具体来说，npm run watch命令会执行项目中定义的webpack.mix.js配置文件，其中会指定要编译和打包的前端资源文件，包括app.js。webpack.mix.js配置文件中会定义一系列的编译规则和插件，用于将前端资源文件进行处理和优化，最终生成可供浏览器加载的静态资源文件。

在Laravel 5.8中，加载app.js可以通过以下步骤完成：

确保已经安装了Node.js和npm，并且配置了正确的环境变量。
在项目根目录下打开命令行终端。
运行npm install命令，安装项目所需的依赖包。
运行npm run watch命令，开始监测前端资源文件的变化。
当有前端资源文件发生修改时，npm run watch会自动重新编译和加载这些文件。
在浏览器中打开项目对应的URL，即可看到修改后的效果。

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

云服务器（CVM）：提供灵活可扩展的云服务器实例，满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库 MySQL版（CDB）：提供稳定可靠的云数据库服务，支持高可用、备份恢复、性能优化等功能。详情请参考：https://cloud.tencent.com/product/cdb
云存储（COS）：提供安全可靠的对象存储服务，适用于图片、音视频、文档等各类数据的存储和管理。详情请参考：https://cloud.tencent.com/product/cos
人工智能（AI）：提供丰富的人工智能服务，包括语音识别、图像识别、自然语言处理等，帮助开发者构建智能化应用。详情请参考：https://cloud.tencent.com/product/ai
物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等，助力实现智能化的物联网应用。详情请参考：https://cloud.tencent.com/product/iot

相关搜索:Laravel - npm run watch在Lara 7、Node: v10.15.0和NPM: v6.5.0上不起作用为什么'npm run watch‘在laravel中出现错误？只有在执行命令"php artisan schedule:run“时，Laravel任务调度程序才会运行。图像最初不会完全加载，只有在刷新之后才会加载云计算安全云渗透测试云web安全运维风险审计异常入侵检测运动图像识别

相关搜索:

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

有帮助

没帮助

相关·内容

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

('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...axios --save 第二 laravel-mix使用postcss-px-to-viewport 在webpack.mix.js中添加 mix.js('resources/assets/js/...: [ require('postcss-px-to-viewport') ]}); npm run watch 会报错缺少插件，类似这种安装 cnpm install postcss-viewport-units...sass('resources/assets/sass/app.scss', 'public/css'); 运行 npm run dev 参考： https://learnku.com/articles

3.6K3 0

Laravel Mix 初探

Laravel 上面的安装 Laravel 5.4 以上默认已经安装了 Laravel Mix，在开发机配置了node 和 npm的基础上，仅仅只需要运行下面的命令即可安装： npm install...npm run dev 这个命令仅仅用于产生一个生产就绪的构建文件，并没有把我们静态资源进行压缩，不可发布到线上。...npm run watch 基本和npm run dev构建出来的文件一样，但是可以监测到静态资源文件的变化并且自动构建更新静态资源。...run watch 命令的时候 Browsersync 会启动一个localhost:3000的服务。...因此，你应该在你的视图中使用 Laravel 的全局辅助函数 mix 来正确加载名称被哈希后的文件。

4.3K6 0

在 Laravel 项目中使用 Bootstrap 框架

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

3.4K3 1

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

赶紧打开chrome （disable cache）： image.png 哇，吓了一跳，这打包出来的JS辣么大：lib.js 2.3M（花了14s 才加载完）、app.js 1.2M（花了9s多加载完...": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server..."prod": "npm run production", //生成环境打包 app.js及页面js "production": "cross-env NODE_ENV=production...run watch，Webpack会自动打开浏览器，在127.0.0.1:8888上显示如下： image.png ps: npm run watch 对应的配置文件webpack.app.config.js...可以看到，app.js里面大头分别是vue、vue-router、vue-i18n组件（好家伙，这些组件都是在app.js里面import进来的）。

4K5 0

Laravel中安装使用Vue

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

8341 0

在 Laravel 项目中使用 webpack-encore

正所谓爱之深，责之切，在对 laravel-mix 表示失望之后，我翻出了自己 star 多时的另一包 webpack-encore，虽说很早就 star 了，但之前却没试用过它，可能也是因为对于 laravel-mix...调整后大致如下，你也可以根据自己实际应用情况进行其它调整 "scripts": { "dev": "npm run development", "development": "cross-env...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...，在终端执行 yarn run hot ，浏览器中输入项目绑定的域名（如 app.test)，就可以体验方便高效的 HMR 开发了。

2.1K2 0

php-laravel Redis 广播

具体的流程是页面加载时，网页 js 程序 Laravel Echo 与 Socket.IO 服务器建立连接， laravel 发起通过驱动发布广播，Socket.IO 服务器接受广播内容，对连接的客户端网页推送信息...EchoLaravel Echo是一个JavaScript库，web端可以轻松订阅频道并收听Laravel广播的事件通过 npm 包管理器安装 Echo npm install npm install...laravel-echo-server初始化 laravel-echo-server laravel-echo-server init // 是否在开发模式下运行此服务器（y...Run laravel-echo-server start to run server.设置完成后项目根目录下会生成 laravel-echo-server.json 文件这里面就是刚才的配置执行命令启动...">编译 js 文件 npm run watch浏览器访问项目域名/echo浏览器访问项目域名/push/这是一个测试广播echo 页面会自动弹出到这广播发布到公共频道就完成了私有频道

1101 0

Laravel 前端资源配置教程

最近在学Laravel，遇到前端资源加载的问题，记录一下。一、前端共用资源的配置 1. webpack.mix.js //一般不太更动，透过以下两个档案讲所需资源加载。...'); 2. npm 命令安装前端套件资源(以jquery-ui为例) npm install jquery-ui --save-dev // --save-dev 为加入到package.json：...// vue所有页面共用，可以在app.js初始/启用 6. npm编译 npm run dev #resource档案夹下的资源需要编译才会生效二、各页面私有资源 1....-- 在适当位置加入以上两条语句，建议@stack('styles'放在<head 中， @stack('scripts')放在<body 内底部(部分JS需要等DOM加载完成方可使用)。...</div @endsection 以上这篇Laravel 前端资源配置教程就是小编分享给大家的全部内容了，希望能给大家一个参考。

1.1K5 2

Laravel 项目中编写 Vue 组件

这个实例组件已经在 app.js 文件中注册： Vue.component( 'example-component', require('....或者，运行 npm run watch 命令监听组件的每次修改，进行自动编译。需要 Vue 组件更多信息的话，可以阅读 Vue 官方文档, 它对整个 Vue 框架进行了充分、易读的综述。...以上内容是文档翻译过来的，可以看出要想在 Laravel 中使用Vue 大致需要 4 步。...在 resources/js/components 中编写 .vue 组件在 app.js 中注册视图中应用组件编译运行 npm run dev 命令接下来基于以上步骤编写一个自己的组件创建组件...编译前端资源 npm run dev

8582 0

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

hash 模式使用 URL hash 来模拟一个完整的 URL，这样就可以使 URL 变化时页面却无需重新加载。...安装首先我们会创建一个 Laravel 项目，然后再安装 Vue 的 NPM 路由包： laravel new vue-router cd vue-router # 当使用 Valet 时，建立项目链接...我一般会把路由定义在一个单独的路由模块中，然后再引入主应用文件，但这里为了简便，我会直接在主应用文件（app.js）中定义这些路由。...运行项目自此，我们完成了一个使用 Vue 和 Vue Router 的 SPA 应用的基本框架，接下来让我们通过运行 JavaScript 让它显示出来： yarn watch # 或 npm run...watch 当我们在浏览器中输入对应 URL 时，将会看到如下页面：下一步我们已经建立起了一个使用 Laravel 作为 API 层的 Vue SPA 应用的骨架。

4.2K2 0

laravel + passport + vue安装过程中遇到的麻烦

环境： composer 和 npm 完全使用中国镜像。...不修改vue首页的时候是不会出现‘跳登录、再加载前端’的问题的关键是也加载了app.js文件。也就是说这个登录界面已经是vuejs版本的登录界面了，甚至是vuejs的使用方式的一个优秀样例。...关键是也加载了app.js文件。也就是说:这个登录界面必须设置为vuejs首页，那其想要的真正首页要用vue-router来设置？还是再装一个app.js？...（好像对，文件太大一个都够慢了）那登录界面不加载spp.js，在其他真正的首页加载不就OK了？但是为啥删掉app.js就没有好看的样式了呢？...---- 样式（丑不丑）取决于css/app.css文件 app.js应该是vue.js在laravel里使用的时候，必须这样做的一个打包文件（囊括了普通vue项目的所有文件）吧！

1.4K2 0

PM2 - 进程管理工具

它允许您使应用程序永远保持活动状态，在不停机的情况下重新加载它们，并促进常见的系统管理任务。...全局安装pm2 npm install pm2 -g 启动监听模式自动监听文件变化 pm2 start app.js --watch 常用命令 pm2 start app.js # 启动 pm2 stop...app.js # 停止 pm2 logs # 日志 pm2 stop all # 停止全部 pm2 delete all # 杀死全部进程 pm2 startup # 开机自启 pm2 update...apps: - name: "laravel:queue:work" # 这里自己命名 script: artisan #指定脚本为 artisan 脚本 watch: false...watch: false # 不监听文件变化 interpreter: bash # 使用 Bash 解释器来执行命令 args: "" # artisan 命令和参数 restart_delay

2873 0

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

package.json，内容如下： { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch..., "lodash": "^4.16.2" }, "dependencies": {} } 6.命令行（没有npm...') }}"> 10.在主目录下新建gulpfile.js文件，内容： const elixir = require('laravel-elixir')...') }); 11.命令行（没有gulp,自行下载）：gulp watch 关于laravel中使用gulp Elixir编辑前端资源也可以参考：https://onlyke.com/html/665....docs.golaravel.com/docs/5.0/elixir/ 本文章转载自http://blog.csdn.net/sangjinchao/article/details/60596614 在laravel5.4

1.6K3 0

webpack学习简单总结

--watch 在命令后面加 --watch ，可以不用每次改动都执行命令，而是自动改变注意：修改了webpack配置需要重启，即即使设置了监听也要手动重新编译; 关于版本安装问题：把想要安装的npm...中的script下，定义一个webpack属性，后面定义所有要输入的webpack的命令，定义好之后，在命令窗口运行命令 npm run webpack即可，定义方式与定义npm run dev中的...【常见问题】如果更改了入口文件的数量，比如变成数组形式，或者对象形式，则需要重新手动运行npm run webpack。...hash值可以理解为版本号，只有文件发生改变时，hash值才会变化。 hash值对静态资源的版本管理很有用。...中导入该js文件，最后在App.js中渲染到index.html中 import Layer from '.

1.2K6 0

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

我们将通过演示在 vue-router 进入一个路由之前，如何异步加载数据来继续使用 Laravel 构建我们的 Vue SPA。..., (err, post) => { next(vm => vm.setData(err, post)) }) }, 查阅文档有完整的示例，但只需说我们将异步获取用户数据，并且只有在完成之后我们才会触发... next() 和在组件里设置数据（变量 vm ）检查文档以获得完整的示例，但只需说我们将异步获取用户数据，一旦完成，并且只有在完成之后，我们才会触发next（，并在组件上设置数据（变量vm）。...不要忘记确保通过运行 Laravel Mix 构建最新版本的 JavaScript： # NPM npm run dev # Watch to update automatically while developing...npm run watch # Yarn yarn dev # Watch to update automatically while developing yarn watch 最后，这是我们更新完整的

5.2K1 0

react 同构初步（1）

单页面应用（SPA）在传统的实现）上，面临着首页白屏加载时间过长，seo难以优化的难题。解决这个问题的思路之一就是ssr（服务端渲染）。 ?...环境搭建初始化npm mkdir ssr cd ssr npm init -y 在项目中新建src，下面新建App.js import React,{useState} from 'react';.../build/bundle.js\"" }, npm run dev:server执行打包服务端的bundle。 npm run dev:start则是启动你的node服务。...# 打包服务端bundle.js npm run dev:server # 运行node npm run dev:start 这时你打开http://localhost:9000，就看到页面了 ?...run dev:server npm run dev:client # 启node服务 npm run dev:start 然后在9000端口，就可以看到计数器了。

1.6K3 0

【Laravel系列7.8】广播系统

laravel-echo-server.json Configuration file saved. Run laravel-echo-server start to run server....客户端配置接下来就是客户端的配置，也就是我们前端的配置，在进行配置前，你需要先安装相应的 npm 库。...修改完成之后，我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码，最后需要加载的文件实际上是 public/js/app.js ，直接使用下面的命令行进行编译即可。...npm run dev 执行完编译之后，我们就可以写一个前端页面来进行测试了。在这个页面中，直接引用 app.js 文件即可。...npm run dev 现在你再打开我们的前端测试页面，就可以看到一个 WebSocket 连接已经建立了，之前那个 http 连接也不会一直轮询了。这种情况，才是正常的情况。

2.2K2 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'); ......，提示 Connot find module 'autoprefixer'：可以通过升级 npm 版本（以 Mac 为例）来解决： brew upgrade npm 再继续运行初始化命令，就可以执行成功了...run watch 编译成功，则表明 Tailwind CSS 框架已正常引入。

2.6K2 0

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

然后在 resources\views\welcome.blade.php文件，将其修改为下面的代码将原来的HTML删了，添加一个id为app的div，在其中使用app.js 中注册的组件，需要注意的就是要添加..."> 21 然后，我们npm run dev 一下即可 3.Element-ui 安装我们可以去 Element-ui 官方文档查看安装教程，也就是简单的npm 安装一下...npm i element-ui -S //安装Element-ui 然后在 resources\assets\js\app.js 中引入Element-ui组件 import ElementUI...run dev 编译后即可 6..../components/Example.vue'], resolve)) }, ] }) 然后我们来修改 app.js 文件，我们需要引入刚才的路由文件，在Vue创建时添加路由和

1.4K2 0

Gulp开发教程（翻译）

首先，需要在全局安装Gulp包： npm install -g gulp 然后，在项目里面安装Gulp： npm install --save-dev gulp Using Gulp 现在我们创建一个Gulp...假设js目录下有个app.js文件，那么一个新的app.js将被创建在编译目录下，它包含了js/app.js的压缩内容。想一想，到底发生了什么？我们只在gulpfile.js里做了一点事情。...当只有一个任务的时候，函数并不会起太大的作用。...在执行那些代码之后，插件对象就已经包含了插件，并使用“驼峰式”的方式进行命名（例如，gulp-ruby-sass将被加载成plugins.rubySass），这样就可以很方便地使用了。...三月初发布的Gulp-load-plugins0.4.0版本添加了延迟加载功能，提高了插件的性能，因为插件在使用的时候才会被加载进来，你不用担心package.json里未被使用的插件影响性能（但是你需要把他们清理掉

8504 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭