Vuejs 3: проблема с vue-template-compiler

Я пытаюсь интегрировать vuejs 3 в существующий проект, использующий webpack. Я читал о vue-loader, поэтому пытаюсь им воспользоваться.

В официальной документации у меня есть это:

Каждый раз, когда выпускается новая версия vue, вместе выпускается соответствующая версия vue-template-compiler. Версия компилятора должна быть синхронизирована с базовым пакетом vue, чтобы vue-loader создавал код, совместимый со средой выполнения. Это означает, что каждый раз, когда вы обновляете vue в своем проекте, вы также должны обновлять vue-template-compiler, чтобы он соответствовал ему.

Итак, когда я пытаюсь скомпилировать, я получаю эту ошибку:

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.

Но когда я пытаюсь установить [email protected], я получаю такую ​​ошибку:

❯ 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

Как я могу решить эту проблему?

Чтобы vue 3 нормально работал с webpack без использования vite или vue cli, выполните следующие действия:

1. запустить package.jsonподобное:

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

1. установите последнюю версию vue:

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

1. установите также зависимости разработчика, которые включают @vue/compiler-sfcзаменяющие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 / компилятор-sfc
• css-загрузчик
• загрузчик файлов
• плагин mini-css-extract
• url-загрузчик
• vue-loader
• webpack
• webpack-cli
• webpack-dev-сервер

1. создайте или отредактируйте свой webpack.config.js со следующим содержимым:

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. Добавьте devскрипт для запуска вашего приложения:

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

1. Заполните index.htmlследующим содержанием:

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

Наконец, запустите npm run devвизит http: // localhost: 8080 /

для готового к использованию проекта попробуйте клонировать этот РЕПОЗИТОРИЙ, созданный с помощью описанных выше шагов.

Я считаю, что вам нужно использовать vue-loader @ next с Vue 3

В Vue 3 пакета компилятора SFC больше нет, vue-template-compilerно compiler-sfc( проверьте здесь )

Я полностью согласен с предложением использовать Vue CLI для управления проектом - это избавит вас от многих проблем с управлением всеми зависимостями (особенно сейчас, когда экосистема Vue 3 пытается догнать выпуск Vue 3 и множество событий инструмента нет документации по миграции .... например, vue-loader)

Если вы не можете использовать CLI, потому что ваш существующий проект уже имеет конфигурацию Webpack, вы все равно можете использовать CLI в качестве руководства. Просто создайте новый проект на стороне, используйте vue inspectкоманду для проверки конфигурации Webpack, которую он использует, и на package.jsonпредмет необходимых зависимостей ...

Я обновил приложение Vue2 до Vue3 вручную, и я получал эту ошибку, когда запускал модульные тесты после обновления всех зависимостей.

Чтобы все заработало, мне также пришлось исправить файл конфигурации Jest.

В jest.config.jsнастройках "transform"свойства:

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

Зависимости, которые я использовал для начала, были из нового приложения Vue3.0, которое я создал с помощью cli. Ниже приведены зависимости, которые мне дали мои настройки 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"
  }

Обратите внимание, что для моих настроек .eslintrc.jscli также есть некоторые незначительные изменения для Vue3. При новой установке cli делает "extends"свойство, как показано ниже:

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