Vuejs 3: Problem z kompilatorem vue-template-compiler

Question

Próbuję zintegrować vuejs 3 z istniejącym projektem, który używa webpacka. Czytałem o vue-loader, więc próbuję go użyć.

W oficjalnej dokumentacji mam to:

Za każdym razem, gdy pojawia się nowa wersja vue, wraz z nią publikowana jest odpowiednia wersja kompilatora vue-template-compiler. Wersja kompilatora musi być zsynchronizowana z podstawowym pakietem vue, aby moduł ładujący vue tworzył kod zgodny ze środowiskiem wykonawczym. Oznacza to, że za każdym razem, gdy aktualizujesz vue w swoim projekcie, powinieneś zaktualizować kompilator vue-template-compiler, aby również do niego pasował.

Tak więc, kiedy próbuję kompilować, pojawia się ten błąd:

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.

Ale kiedy próbuję zainstalować [email protected], pojawia się ten błąd:

❯ 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

Jak mogę rozwiązać ten problem?

Answer 1

Aby Vue 3 działał dobrze z webpackiem bez używania vite lub vue cli, wykonaj następujące kroki:

1. zainicjuj coś package.jsonpodobnego:

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

1. zainstaluj ostatnią wersję vue:

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

1. zainstaluj także zależności dev, które zawierają to, @vue/compiler-sfcco zastępujevue-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 / kompilator-sfc
• css-loader
• program ładujący pliki
• mini-css-extract-plugin
• url-loader
• vue-loader
• webpack
• webpack-cli
• webpack-dev-server

1. utwórz lub edytuj swój plik webpack.config.js z następującą zawartością:

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. Dodaj devskrypt, aby uruchomić aplikację:

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

1. Wypełnij index.htmlnastępującą treścią:

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

Na koniec uruchom npm run devwizytę http: // localhost: 8080 /

aby projekt był gotowy do użycia, spróbuj sklonować to REPOZYTORIUM, które zostało zbudowane zgodnie z powyższymi krokami.

Answer 2

Uważam, że musisz użyć Vue -loader @ next z Vue 3

W Vue 3 pakiet kompilator SFC nie jest już vue-template-compilerjednak compiler-sfc( sprawdź tutaj )

Całkowicie zgadzam się z sugestią użycia Vue CLI do zarządzania projektem - zaoszczędzi to wielu kłopotów z zarządzaniem wszystkimi zależnościami (szczególnie teraz, gdy ekosystem Vue 3 próbuje nadrobić zaległości w wydaniu Vue 3 i wielu narzędziach nie nie mam żadnej dokumentacji migracyjnej ... jak vue-loader)

Jeśli nie możesz użyć interfejsu wiersza polecenia, ponieważ istniejący projekt ma już konfigurację pakietu WebPack, nadal możesz użyć interfejsu wiersza polecenia jako przewodnika. Po prostu wygeneruj nowy projekt na boku, użyj vue inspectpolecenia, aby sprawdzić konfigurację pakietu Webpack, którego używa i pod package.jsonkątem wymaganych zależności ...

Answer 3

Zaktualizowałem aplikację Vue2 do Vue3 ręcznie i otrzymałem ten błąd, gdy uruchamiałem testy jednostkowe po uaktualnieniu wszystkich zależności.

Aby wszystko działało, musiałem również naprawić plik konfiguracyjny Jest.

W jest.config.jsustawić "transform"właściwość:

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

Zależności, których użyłem na początku, pochodziły z nowej aplikacji Vue3.0, którą utworzyłem za pomocą CLI. Poniżej znajdują się zależności, które spowodowały moje ustawienia 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"
  }

Zauważ, że dla moich ustawień .eslintrc.jsCLI , wprowadzono również drobne zmiany dla Vue3. W nowej instalacji CLI tworzy "extends"właściwość jak poniżej:

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