多语言展示
当前在线:1559今日阅读:186今日分享:38

解决Laravel5.5+Vue组件修改后没反应问题

之前发表过教导到家使用Laravel5.5+Vue的安装,但是后面发现修改组件内容确没有反应,仔细研究过发现原来vue组件或JS修改了 需要进行编译生成新的public/js/app.js才能修改内容,现在把经验分享给大家
工具/原料
1

电脑

2

网络

3

Laravel5.5版本

4

nodejs

一、安装扩展包

首先我们回顾一下Laravel安装Vue相关扩展包的过程:1.在package.json文件中添加相关的vue扩展包2.执行命令安装淘宝镜像 (npm自带的是国外镜像,容易卡顿,断线)npm install -g cnpm --registry=https://registry.npm.taobao.org3.cnpm install安装相关扩展包4.安装完成

二、使用教程
1

查看自带的vue示例内容,以下是文件位置1./resources/assets/js/app.js2./resources/assets/js/components/ExampleComponent.vue

2

打开浏览器访问一下页面,效果如图

3

修改组件内容,保存并刷新浏览器,发现页面并没有发生变化。

4

后来发现原来Laravel中的vue文件修改后,需要编译,重新生成public/js/app.js等文件 修改才能起作用。以下是Laravel5.5下的几个编译命令本地环境编译 npm run dev本地环境编译 + 监控文件修改 npm run watch生产环境编译 npm run prod

注意事项
1

遇到问题是切忌烦躁,要仔细寻找问题的根源,解决问题

2

Laravel各个版本编译命令有差异,具体请自己查询

3

本文使用的IDE编辑器是PHPstorm,npm安装了扩展包以后会出现node_modules文件夹,此时需要设置文件夹为excluded ,IDE内右键文件夹->Mark Dir As->Excluded ,不然会卡死

推荐信息