Vuejs 3: problema con vue-template-compiler

Question

Sto cercando di integrare vuejs 3 in un progetto esistente che utilizza webpack. Ho letto di vue-loader, quindi sto cercando di usarlo.

Nella documentazione ufficiale ho questo:

Ogni volta che viene rilasciata una nuova versione di vue, viene rilasciata insieme una versione corrispondente di vue-template-compiler. La versione del compilatore deve essere sincronizzata con il pacchetto vue di base in modo che vue-loader produca codice compatibile con il runtime. Ciò significa che ogni volta che aggiorni vue nel tuo progetto, dovresti aggiornare anche vue-template-compiler per abbinarlo.

Quindi, quando provo a compilare ottengo questo errore:

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.

Ma quando provo a installare [email protected] ottengo questo errore:

❯ 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

Come posso risolvere questo problema?

Answer 1

Per far funzionare bene vue 3 con webpack senza usare vite o vue cli segui questi passaggi:

1. init package.jsoncome:

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

1. installa l'ultima versione di vue:

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

1. installa anche le dipendenze dev che include @vue/compiler-sfcquale sostituiscevue-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
• caricatore di file
• mini-css-extract-plugin
• url-loader
• vue-loader
• webpack
• webpack-cli
• webpack-dev-server

1. crea o modifica il tuo webpack.config.js con il seguente contenuto:

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. Aggiungi devscript per eseguire la tua app:

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

1. Compila il index.htmlcon il seguente contenuto:

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

Infine esegui npm run devla visita http: // localhost: 8080 /

per un progetto pronto per l'uso prova a clonare questo REPOSITORY costruito seguendo i passaggi precedenti.

Answer 2

Credo che tu debba usare vue-loader @ next con Vue 3

In Vue 3 il pacchetto del compilatore SFC non è più vue-template-compilerma compiler-sfc( controlla qui )

Sono completamente d'accordo con il suggerimento di utilizzare Vue CLI per gestire il progetto: ti farà risparmiare molti problemi nella gestione di tutte le dipendenze (specialmente ora che l'ecosistema Vue 3 sta cercando di mettersi al passo con il rilascio di Vue 3 e molti eventi dello strumento don ' non ho alcuna documentazione sulla migrazione ... come vue-loader)

Se non sei in grado di utilizzare la CLI perché il tuo progetto esistente ha già la configurazione Webpack, puoi comunque utilizzare la CLI come guida. Basta generare un nuovo progetto sul lato, utilizzare il vue inspectcomando per ispezionare la configurazione Webpack che sta utilizzando e package.jsonper le dipendenze richieste ...

Answer 3

Ho aggiornato manualmente un'app Vue2 a Vue3 e ho ricevuto questo errore quando stavo eseguendo gli unit test dopo aver aggiornato tutte le dipendenze.

Per far funzionare tutto, ho anche dovuto correggere il file di configurazione di Jest.

In jest.config.jsimpostare la "transform"proprietà su:

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

Le dipendenze che ho usato per iniziare provenivano da una nuova app Vue3.0 che ho creato utilizzando il cli. Di seguito sono riportate le dipendenze ottenute dalle mie impostazioni 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"
  }

Nota che per le mie impostazioni cli, .eslintrc.jsha anche alcune piccole modifiche per Vue3. In una nuova installazione, il cli rende la "extends"proprietà come di seguito:

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