首頁  >  文章  >  php框架  >  總結Homestead中使用laravel-mix問題

總結Homestead中使用laravel-mix問題

藏色散人
藏色散人轉載
2021-03-31 17:31:542372瀏覽

下面由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.com。如有侵權,請聯絡admin@php.cn刪除