Vuejs 3 webpack :vue模板编译器的问题

Question

我正在尝试将vuejs 3集成到一个使用webpack的现有项目中。我读过关于vue-loader的文章，所以我试着用它。

在正式文件中，我有以下几点：

每次发布新版本的vue时，都会同时发布相应版本的vue模板编译器。编译器的版本必须与基本的vue包同步，这样vue加载程序就可以生成与运行时兼容的代码。这意味着每次在项目中升级vue时，都应该升级vue模板编译器以匹配它。

因此，当我试图编译时，会得到以下错误：

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-编译器@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

我该如何解决这个问题？

Answer 1

要使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. 还安装dev依赖项，其中包括@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/编译程序-证监会
• css-装载机
• 文件加载器
• 迷你-css-提取-插件
• url加载器
• vue-装载机
• webpack
• webpack-克莱伊
• webpack开发服务器

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="/dist/main.css" />
<div id="app"></div>
<script src="/dist/main.js"></script>

终于运行npm run dev访问http://localhost:8080/

对于准备使用的项目，请尝试克隆此储存库，该是按照上述步骤构建的。

​

​

Answer 2

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

在Vue 3中，SFC编译器包不再是vue-template-compiler，而是compiler-sfc (检查这里)。

我完全同意使用Vue CLI来管理项目的建议--这将为您管理所有依赖项(特别是现在Vue 3生态系统试图赶上Vue 3发行版和许多工具甚至没有任何迁移文档....like vue-加载器时)节省很多麻烦。

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

Answer 3

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

尽管如此，它用它的加载程序和模板编译器安装Vue 2.x .

要将所有内容切换到Vue 3，以及它的依赖项，只需运行：

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

瞧！你现在用的是Vue 3