Vuejs 3: Problem mit dem Vue-Template-Compiler

Question

Ich versuche, vuejs 3 in ein vorhandenes Projekt zu integrieren, das Webpack verwendet. Ich habe über Vue-Loader gelesen, also versuche ich es zu benutzen.

In der offiziellen Dokumentation habe ich Folgendes:

Jedes Mal, wenn eine neue Version von vue veröffentlicht wird, wird eine entsprechende Version von vue-template-compiler zusammen veröffentlicht. Die Version des Compilers muss mit dem Basis-Vue-Paket synchron sein, damit der Vue-Loader Code erzeugt, der mit der Laufzeit kompatibel ist. Dies bedeutet, dass Sie jedes Mal, wenn Sie vue in Ihrem Projekt aktualisieren, den vue-template-compiler entsprechend aktualisieren sollten.

Wenn ich versuche zu kompilieren, erhalte ich folgende Fehlermeldung:

Vue packages version mismatch:

- [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- [email protected] (/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.

Aber wenn ich versuche, [email protected] zu installieren, erhalte ich folgende Fehlermeldung:

❯ npm install [email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
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

Wie kann ich dieses Problem lösen?

Answer 1

Gehen Sie folgendermaßen vor, damit Vue 3 mit Webpack ohne Verwendung von Vite oder Vue Cli funktioniert:

1. Init das package.jsonGleiche:

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

1. Installieren Sie die letzte Version von vue:

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

1. Installieren Sie auch die Dev-Abhängigkeiten, einschließlich @vue/compiler-sfcder Ersetzungenvue-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 / compiler-sfc
• CSS-Loader
• Dateilader
• Mini-CSS-Extrakt-Plugin
• URL-Lader
• Vue-Loader
• Webpack
• webpack-cli
• Webpack-Dev-Server

1. Erstellen oder bearbeiten Sie Ihre webpack.config.js mit folgendem Inhalt:

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
  }
});

1. Fügen Sie ein devSkript hinzu, um Ihre App auszuführen:

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

1. Füllen Sie das index.htmlmit folgendem Inhalt:

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

Führen Sie npm run devzum Schluss den Besuch http: // localhost: 8080 / aus

Versuchen Sie für ein gebrauchsfertiges Projekt, dieses REPOSITORY zu klonen, das durch Ausführen der obigen Schritte erstellt wurde.

Answer 2

Ich glaube, Sie müssen vue-loader @ next mit Vue 3 verwenden

In Vue 3 ist das SFC-Compiler-Paket nicht mehr vue-template-compileraber compiler-sfc( siehe hier )

Ich stimme dem Vorschlag, Vue CLI zum Verwalten des Projekts zu verwenden, voll und ganz zu - dies erspart Ihnen viel Ärger beim Verwalten aller Abhängigkeiten (insbesondere jetzt, wenn das Vue 3-Ökosystem versucht, mit der Vue 3-Version Schritt zu halten, und viele Tool-Ereignisse nicht mehr erforderlich sind). Ich habe keine Migrationsdokumentation .... wie Vue-Loader)

Wenn Sie CLI nicht verwenden können, weil Ihr vorhandenes Projekt bereits über eine Webpack-Konfiguration verfügt, können Sie CLI weiterhin als Leitfaden verwenden. Generieren Sie einfach vue inspectnebenbei ein neues Projekt , überprüfen Sie mit dem Befehl die verwendete Webpack-Konfiguration und die package.jsonerforderlichen Abhängigkeiten ...

Answer 3

Ich habe eine Vue2-App manuell auf Vue3 aktualisiert und habe diesen Fehler erhalten, als ich die Komponententests ausgeführt habe, nachdem ich alle Abhängigkeiten aktualisiert habe.

Um alles zum Laufen zu bringen, musste ich auch die Konfigurationsdatei von Jest reparieren.

In jest.config.jssetzen Sie die "transform"Eigenschaft auf:

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

Die Abhängigkeiten, mit denen ich angefangen habe, stammten von einer neuen Vue3.0-App, die ich mit der CLI erstellt habe. Nachfolgend sind die Abhängigkeiten aufgeführt, die mir meine CLI-Einstellungen gebracht haben:

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

Beachten Sie, dass für meine CLI-Einstellungen .eslintrc.jsauch einige geringfügige Änderungen für Vue3 vorgenommen wurden. Bei einer Neuinstallation macht die CLI die "extends"Eigenschaft wie folgt:

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