Vuejs 3 : problème avec vue-template-compiler

Question

J'essaie d'intégrer Vuejs 3 à un projet existant qui utilise Webpack. J'ai lu des informations sur vue-loader, et j'essaie donc de l'utiliser.

Dans la documentation officielle, j'ai ceci :

Chaque fois qu'une nouvelle version de vue est publiée, une version correspondante de vue-template-compiler est publiée en même temps. La version du compilateur doit être synchronisée avec le paquetage de base de vue afin que vue-loader produise un code compatible avec le runtime. Cela signifie que chaque fois que vous mettez à jour vue dans votre projet, vous devez mettre à jour vue-template-compiler pour qu'il corresponde également.

Donc, quand j'essaie de compiler, j'obtiens cette erreur :

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.

Mais lorsque j'essaie d'installer vue-template-compiler@3.0.2, j'obtiens cette erreur :

 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

Comment puis-je résoudre ce problème ?

Answer 1

Pour faire fonctionner Vue 3 avec webpack sans utiliser vite ou vue cli, suivez ces étapes :

1. init le package.json comme :

   { "private": true, "name": "vue-3", "description": null,

   }

2. installer la dernière version de vue :

npm i --save vue@next vue-loader@next

3. installez également les dépendances dev qui incluent @vue/compiler-sfc qui remplace vue-template-compiler

   npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-plugin url-loader webpack webpack-cli webpack-dev-server

• @vue/compilateur-sfc
• css-loader
• chargeur de fichiers
• mini-css-extract-plugin
• url-loader
• vue-loader
• webpack
• webpack-cli
• webpack-dev-server

4. créer ou modifier votre webpack.config.js avec le contenu suivant :

   const path = require("path"); const { VueLoaderPlugin } = require("vue-loader"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");

   module.exports = (env = {}) => ({ mode: env.prod ? "production" : "development", devtool: env.prod ? "source-map" : "cheap-module-eval-source-map", entry: [ require.resolve(webpack-dev-server/client), path.resolve(dirname, "./src/main.js") ].filter(Boolean), output: { path: path.resolve(dirname, "./dist"), publicPath: "/dist/" }, resolve: { alias: { // this isn't technically needed, since the default vue entry for bundlers // is a simple export * from '@vue/runtime-dom. However having this // extra re-export somehow causes webpack to always invalidate the module // on the first HMR update and causes the page to reload. vue: "@vue/runtime-dom" } }, module: { rules: [ { test: /.vue$/, use: "vue-loader" }, { test: /.png$/, use: { loader: "url-loader", options: { limit: 8192 } } }, { test: /.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { hmr: !env.prod } }, "css-loader" ] } ] }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: "[name].css" }) ], devServer: { inline: true, hot: true, stats: "minimal", contentBase: __dirname, overlay: true, injectClient: false, disableHostCheck: true } });

5. Ajouter dev script pour exécuter votre application :

   { "private": true, "scripts": { "dev": "webpack-dev-server" }, "dependencies": { "vue": "^3.0.2" }, "name": "vue-3", "description": null, "devDependencies": { ... } }

6. Remplir le index.html avec le contenu suivant :

   <link rel="stylesheet" href="http://stackoverflow.com/dist/main.css" /> <div id="app"></div> <script src="/dist/main.js"></script>

Enfin exécuter npm run dev la visite http://localhost:8080/

pour un projet prêt à l'emploi, essayez de cloner ceci REPOSITOIRE qui a été construit en suivant les étapes ci-dessus.

Answer 2

Je crois que vous devez utiliser vue-loader@next avec Vue 3

Dans Vue 3, le paquetage du compilateur SFC n'est plus vue-template-compiler mais compiler-sfc ( Vérifiez ici )

Je suis tout à fait d'accord avec la suggestion d'utiliser Vue CLI pour gérer le projet - cela vous épargnera beaucoup de problèmes pour gérer toutes les dépendances (surtout maintenant que l'écosystème Vue 3 essaie de rattraper la sortie de Vue 3 et que beaucoup d'outils n'ont pas de documentation sur la migration ....like vue-loader).

Si vous ne pouvez pas utiliser le CLI parce que votre projet existant a déjà une configuration Webpack, vous pouvez toujours utiliser le CLI comme guide. Il suffit de générer un nouveau projet sur le côté, d'utiliser vue inspect pour inspecter la configuration de Webpack qu'il utilise et package.json pour les dépendances requises...

Answer 3

Je viens d'installer la gemme Webpacker dans rails qui vient avec de belles tâches qui installent Vue.

Néanmoins, il installe Vue 2.x avec son chargeur et son compilateur de modèles...

Pour passer à Vue 3 et à ses dépendances, il suffit d'exécuter :

yarn add vue@next vue-loader@next @vue/compiler-sfc

Voilà ! Vous utilisez Vue 3 maintenant

Answer 4

J'ai mis à jour manuellement une application Vue2 vers Vue3 et j'ai obtenu cette erreur lorsque j'ai exécuté les tests unitaires après avoir mis à jour toutes les dépendances.

Pour que tout fonctionne, j'ai également dû corriger le fichier de configuration de Jest.

En jest.config.js fixer le "transform" propriété à :

{
  transform: '^.+\\.vue$': `vue-jest`
}

Les dépendances que j'ai utilisées pour commencer provenaient d'une nouvelle application Vue3.0 que j'ai créée à l'aide du cli. Voici les dépendances que mes paramètres de cli m'ont permis d'obtenir :

  "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"
  }

Notez que pour mes paramètres cli, le .eslintrc.js comporte également quelques modifications mineures pour Vue3. Dans une nouvelle installation, le cli fait le "extends" comme ci-dessous :

  extends: [
    `plugin:vue/vue3-essential`,
    `eslint:recommended`
  ],