Laravel MIX的使用（安装）

矫情吗；* 2023-06-20 11:57 4阅读 0赞

[Laravel Mix][] 提供了定义 Webpack 构建步骤的 API，用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法，可以流畅地定义资源管道。  
当然，你不一定非要使用它来开发应用；

# 安装 #

在安装 Mix 之前，要先确保机器上已经安装了 Node.js 和 NPM。  
如果你不知道是否安装了可以查看一下版本：

node -v
    npm -v

Laravel 官方建议使用`Laravel Homestead`，但我相信很多人并没有使用这个东西（我就是其中一个），也许你用的是集成环境或者自己搭建的，可能在使用过程中遇到过类似以下的问题，希望对你有帮助。

首先你需要使用以下命令安装 npm 依赖，不过我在这里使用 Yarn 来安装依赖。如果你没有没有安装Yarn，你可以安装一个，全凭个人喜好。

npm install -g yarn

然后开始吧

##### 1.因为国内的网络原因，我们还需为 Yarn 配置安装加速 #####

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

##### 2.使用 Yarn 安装依赖(如果你是windows系统，切记加上后面的 --no-bin-links) #####

yarn install --no-bin-links

##### 3.安装cross-env，解决’NODE\_ENV’非内部或外部命令 #####

yarn add cross-env

##### 4.修改一下 Mix 的配置文件，非必须步骤，建议操作 #####

修改`webpack.mix.js`,在末尾加了一个 version()，使 Mix 每次生成的静态文件后面加上一个类似版本号的参数，避免浏览器缓存。

...
    ...
    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')
       .version();

##### 5.运行启动 #####

npm run watch-poll

`watch-poll`会在你的终端里持续运行，监控`resources`文件夹下的资源文件是否有发生改变。在 `watch-poll`命令运行的情况下，一旦资源文件发生变化，`Webpack`会自动重新编译。

看下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70]  
桌面右下角  
![在这里插入图片描述][20191210155147751.png]  
关于`MIX`的各种详细使用请直接查阅相关社区文档：[https://learnku.com/docs/laravel/6.x/mix/5150][https_learnku.com_docs_laravel_6.x_mix_5150]  
好了，比较简单的一个小教程。如果你有其他问题，可以留言。

[Laravel Mix]: https://github.com/JeffreyWay/laravel-mix
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210143234427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU=,size_16,color_FFFFFF,t_70
[20191210155147751.png]: https://img-blog.csdnimg.cn/20191210155147751.png
[https_learnku.com_docs_laravel_6.x_mix_5150]: https://learnku.com/docs/laravel/6.x/mix/5150