Laravel-MIX 的各种问题解决方案

Laravel 的前端工作流的问题确实有各种各样奇奇怪怪的坑等着你去发现,没错,我指的就是在 Windows 下的蛋疼开发,我这里就整理了一些解决方案

总之发现问题,先看报错,但是基本上以下的步骤都能解决问题,我在公司在家这问题遇到不下10遍了,通解方案

一、解决方案

1.首先 cd 到你的项目根目录,删除之前 yarn 的文件(假若之前没yarn过,可忽略本步)

rm -rf node_modules

2.npm & yarn 换淘宝源

yarn config set registry https://registry.npm.taobao.org/ 
npm config set registry https://registry.npm.taobao.org/ 

3.重新 install,这次带上参数“ --no-bin-links ”

yarn install --no-bin-links

//为何使用“--no-bin-links”
The --no-bin-links argument will prevent npm from creating symlinks for any binaries the package might contain.
字面意思是设置 npm install 时不要创建符号链接。查了下说是为了解决 linux 下的 npm 在 ntfs 分区上运行 npm install 遇到的创建软连接失败问题引入的。

4.接下来打开项目根目录下的 pakage.json ,去掉四处 cross-env 字样,有三个是在 scripts 下的,一个是 devDependencies 下的,删除后的效果如下:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "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_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    }
}

5.npm run dev 完成

二、针对性的解决方案

1.node-sass报错

让npm重新编译生成这个模块,执行如下指令

npm rebuild node-sass --no-bin-links

然后再 npm run dev 就好了

2. Font Awesome 安装报错

安装 Font Awesome ,执行指令 yarn add @fortawesome/Font Awesome-free 报错。带上 --no-bin-links 就好了

yarn add @fortawesome/fontawesome-free --no-bin-links

3.Command failed: npm install vue-template-compiler --save-dev --production=false 报错

这是我再 Laravel 6 上发现的新问题,当我 yarn install --no-bin-links 之后,运行 npm run dev 时给我报的错,此时需要执行如下的指令安装缺少的部分

yarn add vue-template-compiler --dev --production=false --no-bin-links

然后再 npm run dev 就好了

NightingaleWK

曾经我是一名冒险家,直到我的膝盖中了一箭。

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Laravel-MIX 的各种问题解决方案
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close