按照 laravel 官方文档在准备使用 laravel-mix 时遇到了很多问题,许多同学应该会遇到同样的问题,自己花了一些时间来解决这些问题,在此做个笔记帮助大家减少填坑的时间。

环境

  1. laravel v5.4
  2. node v6.10.2
  3. 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 问题汇总的更多相关文章

  1. 使用 visualstudio code 编辑器调试执行在 homestead 环境中的 laravel 程序

    由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...

  2. 用 Visual Studio Code 调试运行在 homestead 环境中的 laravel 程序

    由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...

  3. iBrand 教程 0.1:Windows + Homestead 5 搭建 Laravel 开发环境

    统一开发环境 为了保证在学习和工作过程中避免因为开发环境不一致而导致各种各样的问题,Laravel 官方为了我们提供了一个完美的开发环境 Laravel Homestead,让我们无需再本地安装 PH ...

  4. Homestead中PHP扩展无phpize难以安装redis扩展的问题及解决办法

    这真是一个非常深的坑.homestead中自带很多版本的php.然而扩展中缺没有phpize,这个东西是php添加扩展需要的东西本人在laravel中需要用到Redis扩展.这个和laravel的pr ...

  5. 版本号/缓存刷新 laravel mix函数

    很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本.Mix 可以使用 version 方法为你处理这种场景. version 方法会自动附加唯一哈希到已 ...

  6. c#中 uint--byte[]--char[]--string相互转换汇总

    原文:c#中 uint--byte[]--char[]--string相互转换汇总 在在做一些互操作的时候往往需要一些类型的相互转换,比如用c#访问win32api的时候往往需要向api中传入DWOR ...

  7. [项目推荐] Corcel 让你在 WordPress 中使用 Laravel

    你想过可以在 WordPress 中使用 Laravel 或者任意一种 PHP 框架吗? Corcel 可以帮你实现! 开发网站应用就应该是快捷并有趣的.当然了,每个应用都会有它自己的需求和生命周期. ...

  8. Linux中find命令的用法汇总

    Linux中find命令的用法汇总 https://www.jb51.net/article/108198.htm

  9. Laravel 5 中使用 Laravel Excel 实现 Excel/CSV 文件导入导出功能

    1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和导出. 该 ...

随机推荐

  1. 8. sql 片段

    sql 片段: <sql id="columnBase"> `id`, `title`, `author_id` as authorId, `state`, `feat ...

  2. windows_study_2

    描述:如何确定像%ProgramFiles%这样格式的目录的具体位置? 解决:运行——cmd——echo %ProgramFiles%——回车——界面就显示出目录位置了.

  3. DJ 算法的队列优先优化

    DJ算法就是求单源最短路的算法,但是时间复杂度不太理想,所以在此献上用最小堆来优化的算法. 如果不懂优先队列可以先去看STL分类关于优先队列的介绍: ///POJ 2387为例 #include< ...

  4. 毕业设计 python opencv实现车牌识别 颜色定位

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  5. 将tomcat的protocol改为APR模式,以提高性能

    以下是我修改的内容,以及对tomcat可以修改的参数 scm APR模式启动步骤:   1:将附件中的压缩包,在/usr/local 下解压   2:修改../bin/catalina.sh  ,在其 ...

  6. man bash 关于shell的应有尽有 语法、快捷键...

    文件加载顺序 for if case ... 语法 往前移动一个单词 alt f https://github.com/hokein/Wiki/wiki/Bash-Shell%E5%B8%B8%E7% ...

  7. 惠普台式机在UEFI BIOS设置通电自动开机 影响电脑自动重启关不了机设置

    设置通电自动开机 影响电脑自动重启关不了机设置   惠普台式机在UEFI BIOS中 1. 开机时不断点击F10键进入BIOS,选择Advanced(高级)然后选择Boot Options,点击回车 ...

  8. acm之奇葩数据输入专题

    1.每組测试数据都在一行,不知道每组测试数据的长度,以换行为测试数据输入的结束 关键代码:if (cin.get() == '\n')   {语句} 例如:找出每组测试的最大值: 输入: 3 1 4 ...

  9. element -validateField校验提示

    <el-form :model="numberValidateForm" ref="numberValidateForm" :rules="ru ...

  10. js生成随机码(只含有数字和字母的随机码)

    /*** randomWord 产生任意长度随机字母数字组合** randomFlag 是否任意长度 min 任意长度最小位[固定位数] max 任意长度最大位*/ function randomWo ...