Homestead 中使用 laravel-mix 問題彙總

按照 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個問題是按順序出現的，按照以上進行解決基本是能夠正常執行通過的，有什麼問題可以留言交流。

討論交流