Estoy tratando de integrar vuejs 3 a un proyecto existente que usa webpack. Leí sobre vue-loader, así que estoy tratando de usarlo.
En la documentación oficial tengo esto:
Cada vez que se lanza una nueva versión de vue, se lanza una versión correspondiente de vue-template-compiler. La versión del compilador debe estar sincronizada con el paquete base de vue para que vue-loader produzca un código que sea compatible con el tiempo de ejecución. Esto significa que cada vez que actualice vue en su proyecto, también debe actualizar vue-template-compiler para que coincida.
Entonces, cuando intento compilar me sale este error:
Vue packages version mismatch: - vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js) - vue-template-compiler@2.6.12 (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json) This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.Pero cuando intento instalar vue-template-compiler@3.0.2 me sale este error:
❯ npm install vue-template-compiler@3.0.2 npm ERR! code ETARGET npm ERR! notarget No matching version found for vue-template-compiler@3.0.2. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. npm ERR! A complete log of this run can be found in: npm ERR! /home/alejo/.npm/_logs/2020-11-17T02_52_46_458Z-debug.log¿Como puedó resolver esté problema?
Creo que necesitas usar vue-loader@next con Vue 3
En Vue 3, el paquete del compilador SFC ya no es vue-template-compiler sino compiler-sfc ( consulte aquí )
Estoy completamente de acuerdo con la sugerencia de usar Vue CLI para administrar el proyecto; le ahorrará muchos problemas para administrar todas las dependencias (especialmente ahora que el ecosistema de Vue 3 está tratando de ponerse al día con el lanzamiento de Vue 3 y muchas herramientas incluso no lo hacen). no tengo ninguna documentación de migración ... como vue-loader)
Si no puede usar la CLI porque su proyecto existente ya tiene la configuración de Webpack, aún puede usar la CLI como guía. Simplemente genere un nuevo proyecto en el lateral, use el comando vue inspect para inspeccionar la configuración de Webpack que está usando y package.json para las dependencias requeridas...
Actualicé una aplicación Vue2 a Vue3 manualmente y recibí este error cuando estaba ejecutando las pruebas unitarias después de actualizar todas las dependencias.
Para que todo funcionara, también tuve que arreglar el archivo de configuración de Jest.
En jest.config.js establezca la propiedad "transform" en:
{ transform: '^.+\\.vue$': `vue-jest` }Las dependencias que usé para comenzar fueron de una nueva aplicación Vue3.0 que creé usando el cli. A continuación se muestran las dependencias que me dieron las configuraciones de mi cli:
"dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-unit-jest": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/test-utils": "^2.0.0-0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "node-sass": "^4.12.0", "sass-loader": "^8.0.2", "typescript": "~3.9.3", "vue-jest": "^5.0.0-0" } Tenga en cuenta que para la configuración de mi cli, .eslintrc.js también tiene algunos cambios menores para Vue3. En una instalación nueva, el cli crea la propiedad "extends" como se muestra a continuación:
extends: [ `plugin:vue/vue3-essential`, `eslint:recommended` ],