Mix procesa lo que tú le indiques que procese como entrypoints y él se mete de ahí hacia adentro haciendo que Webpack siga un conjunto de reglas. La mayoría viene preconfigurada y el archivo webpack.mix.js
te permite customizar a gusto.
Tu archivo de configuración dice:
mix.js(
// Toma el script en resources/js/app.js como entrypoint
"resources/js/app.js",
// transpílalo a public/js/app.js incluyendo recursivamente sus dependencias
"public/js/app.js"
).vue() // usa las reglas Vue osea incluye el template-compiler y eso...
.sass(
// luego toma los estilos desde el entrypoint "resources/sass/app.scss"
"resources/sass/app.scss",
// y usa node-sass para convertirlo en public/css/app.css
// incluyendo otros estilos llamados con @import
"public/css/app.css"
);
Ten presente que la versión transpilada de resources/js/app.js
o parte de ésta, pisará public/js/app.js
. En general cualquier script o estilo que haya en public
pueden ser efímeros.
└─ public
└─ js
└─ app.js // lógica existente
└─ resources
└─ js
└─ app.js // lógica nueva
└─ App.vue
Yo sugeriría:
Renombra tu archivo, (por ejemplo a current.js) con eso evitas que lo pise mix.
Mueve tu archivo a resources/js
(con otro nombre, para no chocar con lo que tienes en app.js), de modo que tus scripts de origen siempre están en resources y lo que haya en public no se edite a mano
Usa mix para copiar ese archivo desde su nueva ubicación a public, sin alterarlo
mix.js('resources/js/app.js', 'public/js').vue()
.copy('resources/js/current.js','public/js/current.js')
.sass('resources/sass/app.scss', 'public/css');
Quedando
└─ public
└─ js
└─ <VACIO, se llena con mix>
└─ resources
└─ js
└─ app.js // lógica nueva
└─ current.js // lógica existente
└─ App.vue
Dependiendo del contenido de tu lógica actual más adelante podrás integrarla a la nueva, pero primero haz funcionar lo crucial.