按照 laravel 官方文檔在準(zhǔn)備使用 laravel-mix 時遇到了很多問題倦蚪，許多同學(xué)應(yīng)該會遇到同樣的問題弟头，自己花了一些時間來解決這些問題彻坛，在此做個筆記幫助大家減少填坑的時間珍逸。
環(huán)境
laravel v5.4
node v6.10.2
npm v3.10.10
Homestead 中 node 和 npm 默認(rèn)的版本如上述所示
問題
1. 直接執(zhí)行 npm intall 會出現(xiàn) symlink 錯誤
image
該錯誤是自己沒有仔細(xì)看官方文檔導(dǎo)致僧免，需要執(zhí)行 npm install --no-bin-links
如果你使用的是 Windows 系統(tǒng)或運行在 Windows 系統(tǒng)上的 VM, 你需要在運行 npm install 命令時將 --no-bin-links 開啟
2. cross-env: not found
正確執(zhí)行 npm 安裝成功后，執(zhí)行 npm run dev 會提示 cross-env:not found 錯誤克伊。在 laravel 5.4 中 package.json 中的內(nèi)容如下：
{
"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 中的區(qū)別
3. no such file or directory , scandir ‘…/node_modules/node-sass/vendor
重建 node-sass 即可酥郭，請務(wù)必執(zhí)行如下命令：
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
結(jié)束
本來準(zhǔn)備使用laravel+vue2 來寫點小demo，在安裝運行過程中遇到以上4個問題愿吹，4個問題是按順序出現(xiàn)的不从，按照以上進行解決基本是能夠正常執(zhí)行通過的，有什么問題可以留言交流犁跪。
討論交流
qrcode.jpg
