Este problema me ha estado tirando de los pelos durante días. He estado trabajando en un proyecto que se compone de dos aplicaciones Vue de una sola página, una aplicación de dos páginas si lo desea. Estas aplicaciones comparten algunas funciones comunes, por lo que se han extrapolado a las carpetas /utilities , /state y /mixins . Cosas bastante estándar.
src/ ├─ apps/ │ ├─ admin/ │ │ ├─ main.js │ │ ├─ app.vue <-- mixins imported │ ├─ customer/ │ │ ├─ main.js │ │ ├─ app.vue <-- mixins imported ├─ mixins/ ├─ state/ ├─ utilities/ ├─ vue.config.jsHe usado webpack para alias de estas rutas para poder acceder a ellas sin rutas relativas desagradables.
// vue.config.js const path = require('path'); module.exports = { // Put this in the ASP.NET Core directory outputDir: "../wwwroot/app", pages: { admin: "src/apps/admin/main.js", customer: "src/apps/customer/main.js", }, configureWebpack: { resolve: { alias: { '@app': path.resolve(__dirname, 'src/'), '@customer': path.resolve(__dirname, 'src/apps/customer/'), '@admin': path.resolve(__dirname, 'src/apps/admin/'), '@mixins': path.resolve(__dirname, 'src/mixins/'), '@utilities': path.resolve(__dirname, 'src/utilities/'), } } } };Todo esto funcionó bien para la aplicación del cliente, accediendo al código mixin a través de:
import { mixin } from '@mixins'; Pero la aplicación de administración me ha estado causando serios problemas que parece que no puedo resolver. El servicio vue-cli construye con éxito el proyecto sin ningún error, pero cuando cargo el navegador aparece una pantalla en blanco. Sin error de consola, nada. La peor parte es que puedo acceder a @state y @utilities con alias en la aplicación de administración sin ningún problema. Solo @mixins es lo que me causa problemas y no puedo entender por qué.
Para una verificación de cordura, copié cada combinación individual en una nueva carpeta con el alias @common e importé desde allí en la aplicación de administración para intentar encontrar el archivo que podría estar causando el problema. Copié cada uno de ellos y nunca se rompió. Luego cambié una importación de @mixins en la aplicación del cliente a @common y volvió a aparecer la pantalla blanca sin error. Incluso intenté volver a las importaciones relativas como un avemaría, pero el problema persiste. Es como si todo el proyecto simplemente se arruinara si ambas aplicaciones quieren importar desde la carpeta mixins, aunque está bien si solo una lo hace.
Estoy al final de mi atadura con esto. Alguien tiene alguna idea de lo que puede estar pasando aquí porque estoy totalmente perdido.
Si alguien termina aquí, asegúrese de que su html incluya el archivo web chunk-common.js como secuencia de comandos. Tenía los archivos js individuales de las aplicaciones incluidos y chunk-vendors.js pero, al incluir los mixins en ambas aplicaciones, toda la carpeta @mixins se extrajo en común donde ya no estaba disponible. Sorprendentemente, la falla fue completamente silenciosa donde normalmente esperaría un error de algún tipo en la consola del navegador.
La fuente de este problema estaba un poco ofuscada porque algunas de las otras carpetas con scripts compartidos ( @utilities y @state ) continuaron funcionando a pesar de que faltaba el script común. No puedo explicar que, aparte de que el paquete web no los extrajo en común porque eran demasiado pequeños, ¿quizás? De todos modos, asegúrese de revisar los conceptos básicos de su paquete web. Espero que esto ayude al menos a una persona porque fue solo un sumidero de tiempo para mí.