开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

只有在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

相关搜索:为什么'npm run watch‘在laravel中出现错误？图像最初不会完全加载，只有在刷新之后才会加载只有在执行命令"php artisan schedule:run“时，Laravel任务调度程序才会运行。Laravel - npm run watch在Lara 7、Node: v10.15.0和NPM: v6.5.0上不起作用存储服务器管理器串口服务器的通讯查看服务器的用户成都服务器公司的 c#删除服务器图超微服务器测试

相关搜索:

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

有帮助

没帮助

相关·内容

【玩转腾讯云】已有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

8601 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 页面会自动弹出到这广播发布到公共频道就完成了私有频道

1271 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.2K5 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

8722 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.3K2 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

3443 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

通过 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

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.3K6 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.3K2 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.8K2 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里未被使用的插件影响性能（但是你需要把他们清理掉

8654 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭