Vuejs 3: Problema com vue-template-compiler

Question

Estou tentando integrar o vuejs 3 a um projeto existente que usa webpack. Eu li sobre o vue-loader, então estou tentando usá-lo.

Na documentação oficial, tenho o seguinte:

Cada vez que uma nova versão do vue é lançada, uma versão correspondente do vue-template-compiler é lançada junto. A versão do compilador deve estar sincronizada com o pacote vue básico para que o vue-loader produza código compatível com o tempo de execução. Isso significa que toda vez que você atualizar o vue em seu projeto, você deve atualizar o vue-template-compiler para combiná-lo também.

Então, quando tento compilar, recebo este erro:

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.

Mas quando tento instalar o [email protected], recebo este erro:

❯ 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

Como posso resolver esse problema?

Answer 1

Para fazer o vue 3 funcionar bem com webpack sem usar vite ou vue cli, siga estas etapas:

1. init package.jsonsemelhantes:

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

1. instale a última versão do vue:

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

1. instalar também as dependências de desenvolvimento que inclui o @vue/compiler-sfcque substituivue-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
• carregador de arquivos
• mini-css-extract-plugin
• url-loader
• vue-loader
• webpack
• webpack-cli
• webpack-dev-server

1. crie ou edite seu webpack.config.js com o seguinte conteúdo:

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. Adicione um devscript para executar seu aplicativo:

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

1. Preencha o index.htmlcom o seguinte conteúdo:

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

Por fim, execute npm run deva visita http: // localhost: 8080 /

para um projeto pronto para usar, tente clonar este REPOSITÓRIO que foi construído seguindo os passos acima.

Answer 2

Eu acredito que você precisa usar o vue-loader @ next com o Vue 3

Em Vue 3 o pacote compilador SFC não é mais vue-template-compiler, mas compiler-sfc( confira aqui )

Eu concordo totalmente com a sugestão de usar o Vue CLI para gerenciar o projeto - isso vai te poupar muitos problemas para gerenciar todas as dependências (especialmente agora quando o ecossistema Vue 3 está tentando alcançar o lançamento do Vue 3 e muitos eventos de ferramentas não não tenho qualquer documentação de migração ... como vue-loader)

Se você não puder usar o CLI porque seu projeto existente já tem a configuração do Webpack, você ainda pode usar o CLI como um guia. Apenas gere um novo projeto paralelamente, use o vue inspectcomando para inspecionar a configuração do Webpack que está usando e package.jsonpara as dependências necessárias ...

Answer 3

Eu atualizei um aplicativo Vue2 para Vue3 manualmente e recebi este erro quando estava executando os testes de unidade após atualizar todas as dependências.

Para fazer tudo funcionar, eu também tive que corrigir o arquivo de configuração de Jest.

Em jest.config.jsdefina a "transform"propriedade para:

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

As dependências que usei para começar eram de um novo aplicativo Vue3.0 que criei usando o cli. Abaixo estão as dependências que minhas configurações CLI me trouxeram:

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

Observe que para minhas configurações CLI, o .eslintrc.jstambém tem algumas pequenas alterações para Vue3. Em uma nova instalação, o cli torna a "extends"propriedade conforme abaixo:

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