搜尋
首頁php框架Laravel總結Homestead中使用laravel-mix問題
總結Homestead中使用laravel-mix問題Mar 31, 2021 pm 05:31 PM
laravelnode.jsnpm

下面由laravel教學專欄給大家總結Homestead中使用laravel-mix問題,希望對需要的朋友有所幫助!

按照laravel 官方文檔在準備使用laravel-mix 時遇到了很多問題,許多同學應該會遇到同樣的問題,自己花了一些時間來解決這些問題,在此做個筆記幫助大家減少填坑的時間。

環境

  • laravel v5.4

  • #node v6.10.2

總結Homestead中使用laravel-mix問題

# #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 中的內容如下:<pre class="brush:php;toolbar:false">{   &quot;private&quot;: true,   &quot;scripts&quot;: {     &quot;dev&quot;: &quot;npm run development&quot;,     &quot;development&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,     &quot;watch&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,     &quot;watch-poll&quot;: &quot;npm run watch -- --watch-poll&quot;,     &quot;hot&quot;: &quot;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&quot;,     &quot;prod&quot;: &quot;npm run production&quot;,     &quot;production&quot;: &quot;cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;   },   &quot;devDependencies&quot;: {     &quot;axios&quot;: &quot;^0.16.2&quot;,     &quot;bootstrap-sass&quot;: &quot;^3.3.7&quot;,     &quot;cross-env&quot;: &quot;^5.0.1&quot;,     &quot;jquery&quot;: &quot;^3.1.1&quot;,     &quot;laravel-mix&quot;: &quot;^1.0&quot;,     &quot;lodash&quot;: &quot;^4.17.4&quot;,     &quot;vue&quot;: &quot;^2.1.10&quot;   } }</pre>請依照以下更改

{
  "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個問題是依序出現的,依照以上進行解決基本上是能夠正常執行通過的,有什麼問題可以留言交流。 ###############【推薦:###最新的五個Laravel影片教學###】##########

以上是總結Homestead中使用laravel-mix問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
npm react 安装报错怎么办npm react 安装报错怎么办Dec 27, 2022 am 11:25 AM

npm react安装报错的解决办法:1、打开项目中的“package.json”文件,找到dependencies对象;2、将其中的“react.json”移动到“devDependencies”;3、在终端中运行“npm audit --production”即可修复警告。

Vercel是什么?怎么部署Node服务?Vercel是什么?怎么部署Node服务?May 07, 2022 pm 09:34 PM

Vercel是什么?本篇文章带大家了解一下Vercel,并介绍一下在Vercel中部署 Node 服务的方法,希望对大家有所帮助!

JavaScript包管理器比较:Npm vs Yarn vs PnpmJavaScript包管理器比较:Npm vs Yarn vs PnpmAug 09, 2022 pm 04:22 PM

本篇文章带大家了解一下三种JavaScript包管理器(npm、yarn、pnpm),并将这三种包管理器进行对比,聊聊npm、yarn、pnpm三者的区别和关联,希望对大家有所帮助,如有问题欢迎指出!

一文解析package.json和package-lock.json一文解析package.json和package-lock.jsonSep 01, 2022 pm 08:02 PM

本篇文章带大家详解package.json和package-lock.json文件,希望对大家有所帮助!

node无法用npm命令怎么办node无法用npm命令怎么办Feb 08, 2023 am 10:09 AM

node无法用npm命令是因为没有正确配置环境变量,其解决办法是:1、打开“系统属性”;2、找到“环境变量”->“系统变量”,然后编辑环境变量;3、找到nodejs所在的文件夹;4、点击“确定”即可。

node爬取数据实例:聊聊怎么抓取小说章节node爬取数据实例:聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据?下面本篇文章给大家分享一个node爬虫实例,聊聊利用node抓取小说章节的方法,希望对大家有所帮助!

聊聊npm配置国内镜像(淘宝镜像)聊聊npm配置国内镜像(淘宝镜像)Aug 09, 2022 pm 12:06 PM

npm是node.js库的包管理工具,因为镜像地址在国外,安装库会比较慢,可以将镜像地址修改为国内地址(淘宝镜像),来提供安装库的速度。

手把手带你使用Node.js和adb开发一个手机备份小工具手把手带你使用Node.js和adb开发一个手机备份小工具Apr 14, 2022 pm 09:06 PM

本篇文章给大家分享一个Node实战,介绍一下使用Node.js和adb怎么开发一个手机备份小工具,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境