Homestead 中使用 laravel-mix 问题汇总
按照 laravel 官方文档在准备使用 laravel-mix 时遇到了很多问题,许多同学应该会遇到同样的问题,自己花了一些时间来解决这些问题,在此做个笔记帮助大家减少填坑的时间。
环境
- laravel v5.4
- node v6.10.2
- npm v3.10.10
Homestead 中 node 和 npm 默认的版本如上述所示
问题
1. 直接执行 npm intall 会出现 symlink 错误
该错误是自己没有仔细看官方文档导致,需要执行 npm install --no-bin-links
如果你使用的是 Windows 系统或运行在 Windows 系统上的 VM, 你需要在运行 npm install 命令时将 --no-bin-links 开启
2. cross-env: not found
正确执行 npm 安装成功后,执行 npm run dev
会提示 cross-env:not found
错误。在 laravel 5.4 中 package.json 中的内容如下:
{
"private": true,
"scripts": {
"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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
请按照如下更改
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=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",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"vue-loader": "^13.0.0"
}
}
注意看 scripts 中的区别
3. no such file or directory , scandir ‘…/node_modules/node-sass/vendor
重建 node-sass 即可,请务必执行如下命令:
npm rebuild node-sass --no-bin-links
4. TypeError: loader.charAt is not a function
需要安装最新版本的 vue-loader
npm install vue-loader --save-dev --no-bin-links
结束
本来准备使用laravel+vue2 来写点小demo,在安装运行过程中遇到以上4个问题,4个问题是按顺序出现的,按照以上进行解决基本是能够正常执行通过的,有什么问题可以留言交流。
讨论交流
Homestead 中使用 laravel-mix 问题汇总的更多相关文章
- 使用 visualstudio code 编辑器调试执行在 homestead 环境中的 laravel 程序
由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...
- 用 Visual Studio Code 调试运行在 homestead 环境中的 laravel 程序
由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...
- iBrand 教程 0.1:Windows + Homestead 5 搭建 Laravel 开发环境
统一开发环境 为了保证在学习和工作过程中避免因为开发环境不一致而导致各种各样的问题,Laravel 官方为了我们提供了一个完美的开发环境 Laravel Homestead,让我们无需再本地安装 PH ...
- Homestead中PHP扩展无phpize难以安装redis扩展的问题及解决办法
这真是一个非常深的坑.homestead中自带很多版本的php.然而扩展中缺没有phpize,这个东西是php添加扩展需要的东西本人在laravel中需要用到Redis扩展.这个和laravel的pr ...
- 版本号/缓存刷新 laravel mix函数
很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本.Mix 可以使用 version 方法为你处理这种场景. version 方法会自动附加唯一哈希到已 ...
- c#中 uint--byte[]--char[]--string相互转换汇总
原文:c#中 uint--byte[]--char[]--string相互转换汇总 在在做一些互操作的时候往往需要一些类型的相互转换,比如用c#访问win32api的时候往往需要向api中传入DWOR ...
- [项目推荐] Corcel 让你在 WordPress 中使用 Laravel
你想过可以在 WordPress 中使用 Laravel 或者任意一种 PHP 框架吗? Corcel 可以帮你实现! 开发网站应用就应该是快捷并有趣的.当然了,每个应用都会有它自己的需求和生命周期. ...
- Linux中find命令的用法汇总
Linux中find命令的用法汇总 https://www.jb51.net/article/108198.htm
- Laravel 5 中使用 Laravel Excel 实现 Excel/CSV 文件导入导出功能
1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和导出. 该 ...
随机推荐
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- Luogu P4095 [HEOI2013]Eden 的新背包问题 思维/动规
当时一直在想前缀和...多亏张队提醒... 从1到n背次包,保存每一个状态下的价值,就是不要把第一维压掉:再从n到1背一次,同样记住每种状态: 然后询问时相当于是max(前缀+后缀),当然前缀后缀中间 ...
- day16 类之间的关系 特殊成员
类与类之间的关系1.依赖关系(一个对象当另一个对象的参数) 关系最浅, 特殊成员: 1. 类名() 会自动调用 __init__() class Foo: def__init__(self, nam ...
- redis实现SSO单点登录,集群,分布式锁
https://blog.csdn.net/aussme/article/details/80660443
- sonar 测试覆盖率
<plugin> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven-plugin</a ...
- Photoshop入门教程(六):通道
学习心得:当大部分人听到通道.心里可能会有一种很害怕的感觉,因为“通道”并不像“图层”这样易于理解,望而生畏.”通道“的本质其实是存储图片的信息,把一张图片比作一个为网站,那么通道就是网站的后台,存储 ...
- 9.ORM数据访问
1.Spring对ORM的支持 ORM : 对象关系映射(Object Relational Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术基于ORM的数据持久层框架有: ...
- dynamic:动态类型简单用法,写法
class 动态创建数据 { //动态类型:本质感觉跟object的用法差不多,只是在执行的时候才知道数据类型 public dynamic Dynamic() { //定义一个动态类型,作为返回值 ...
- java消息中间件
消息中间件介绍 消息队列 什么是消息队列 消息队列是消息中间件的一种实现方式. 什么是消息中间件? 将消息中间件需要理解一下什么是消息和中间件? 消息 消息是指软件对象之间进行交互作用和通讯利用的 ...
- 解决哈希(HASH)冲突的主要方法
https://blog.csdn.net/xtzmm1215/article/details/47177701 虽然我们不希望发生冲突,但实际上发生冲突的可能性仍是存在的.当关键字值域远大于哈希 ...