Como trocar o VITE por Laravel MIX
Execute o comando npm install laravel-mix --save-dev
na raiz do seu projeto.
Crie um arquivo com o nome de webpack.mix.js
na raiz do seu projeto, edite e deixe como abaixo.
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
Altere o arquivo package.json
Original
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@popperjs/core": "^2.11.6",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.8.0",
"sass": "^1.56.1",
"vite": "^4.0.0"
}
}
Modificado
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.11.6",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-mix": "^6.0.49",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.56.1",
"sass-loader": "^12.6.0"
}
}
Edite o arquivo .env
, localize as variáveis abaixo e substitua
Original
VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Modificado
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Nos arquivos blade, você deve trocar chamadas do vite pelas do mix.
A exemplo do arquivo app.blade.php
Original
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
Modificado
<!-- Scripts -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
Remova o vite, execute os comandos abaixo na raiz do projeto.
npm remove vite laravel-vite-plugin
Remova o arquivo de configuração
rm vite.config.js