Vuejs 3 webpack：vue-template-compiler 的问题答案

【问题标题】：Vuejs 3 webpack : Problem with vue-template-compilerVuejs 3 webpack：vue-template-compiler 的问题
【发布时间】：2021-02-28 06:40:31
【问题描述】：

我正在尝试将 vuejs 3 集成到使用 webpack 的现有项目中。我阅读了有关 vue-loader 的信息，所以我正在尝试使用它。

在官方文档中我有这个：

vue 每次发布新版本，都会同时发布对应版本的 vue-template-compiler。编译器的版本必须与基本的 vue 包同步，以便 vue-loader 生成与运行时兼容的代码。这意味着每次在项目中升级 vue 时，都应该升级 vue-template-compiler 以匹配它。

所以，当我尝试编译时，我得到了这个错误：

Vue packages version mismatch:

- vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/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.

但是当我尝试安装 vue-template-compiler@3.0.2 时，我得到了这个错误：

❯ npm install vue-template-compiler@3.0.2
npm ERR! code ETARGET
npm ERR! notarget No matching version found for vue-template-compiler@3.0.2.
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-cli 的 Vue v3 设置：frontendguruji.com/blog/…

标签： javascript vue.js webpack vuejs3 vue-loader

【解决方案1】：

要使 vue 3 在不使用 vite 或 vue cli 的情况下与 webpack 一起正常工作，请按照以下步骤操作：

初始化package.json 喜欢：

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

安装最新版本的 vue：

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

还安装包含@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/compiler-sfc
css 加载器
文件加载器
mini-css-extract-plugin
网址加载器
vue-loader
网页包
webpack-cli
webpack-dev-server

使用以下内容创建或编辑您的 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
  }
});

添加dev 脚本以运行您的应用：

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

用以下内容填写index.html：

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

最后运行npm run dev访问http://localhost:8080/

对于一个准备好使用的项目，请尝试克隆这个 REPOSITORY，它是按照上述步骤构建的。

【讨论】：

Broussadjra Brahim 的建议对我有用。谢谢！我一直在努力解决这个问题。
嗨，Boussadjra Brahim，你能看看stackoverflow.com/questions/67956301/…这个问题吗？
我已经看过了，你能提供codesanbox中的例子吗？

【解决方案2】：

我相信你需要在 Vue 3 中使用 vue-loader@next

在 Vue 3 中，SFC 编译器包不再是 vue-template-compiler 而是 compiler-sfc (check here)

我完全同意使用 Vue CLI 来管理项目的建议——它会为你管理所有依赖项省去很多麻烦（尤其是现在 Vue 3 生态系统正试图赶上 Vue 3 的发布和大量的工具甚至没有任何迁移文档....比如 vue-loader)

如果您因为现有项目已经有 Webpack 配置而无法使用 CLI，您仍然可以使用 CLI 作为指导。只需在旁边生成新项目，使用 vue inspect 命令检查它正在使用的 Webpack 配置，并使用 package.json 获取所需的依赖项...

【讨论】：

【解决方案3】：

我手动将 Vue2 应用升级到 Vue3，升级所有依赖项后运行单元测试时出现此错误。

为了让一切正常工作，我还必须修复 Jest 的配置文件。

在jest.config.js 中，将"transform" 属性设置为：

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

我开始使用的依赖项来自我使用 cli 创建的新 Vue3.0 应用程序。以下是我的 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"
  }

请注意，对于我的 cli 设置，.eslintrc.js 对 Vue3 也有一些小的更改。在全新安装中，cli 使"extends" 属性如下：

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

【讨论】：

让我的 2.6 测试再次使用 3.x 更改 jest.config.js 是有效的！请注意，接受的答案是指不使用vue cli 的场景，我会考虑使用迁移命令vue add vue-next 从2.x -> 3.x（使用最新的npm install -g @vue/cli）升级的标准方法。所以这里的答案被大大低估了恕我直言。

【解决方案4】：

我刚刚在 Rails 中安装了 Webpacker gem，它附带了安装 Vue 的好任务。

尽管如此，它安装 Vue 2.x 及其加载器和模板编译器...

要将所有内容添加到 Vue 3 及其依赖项，只需运行：

yarn add vue@next vue-loader@next @vue/compiler-sfc

瞧！你现在使用的是 Vue 3

【讨论】：