Vuejs 3：vue-template-compiler 的問題

Question

我正在嘗試將 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

我怎么解決這個問題？

Answer 1

要在不使用 vite 或 vue cli 的情況下使 vue 3 與 webpack 一起正常工作，請執行以下步驟：

1. 初始化package.json像：

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

2. 安裝最新版本的 vue ：

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

3. 還安裝包含替換vue-template-compiler @vue/compiler-sfc的開發依賴項

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-plugin
• 網址加載器
• vue-loader
• 網絡包
• webpack-cli
• webpack-dev-server

4. 使用以下內容創建或編輯您的 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
  }
});

5. 添加dev腳本以運行您的應用程序：

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

6. 使用以下內容填充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 。

Answer 2

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

在 Vue 3 中，SFC 編譯器包不再是vue-template-compiler而是compiler-sfc （在這里查看）

我完全同意使用 Vue CLI 來管理項目的建議——它會為你省去管理所有依賴項的很多麻煩（特別是現在當 Vue 3 生態系統試圖趕上 Vue 3 發布並且許多工具事件不沒有任何遷移文檔....像 vue-loader）

如果您因為現有項目已經有 Webpack 配置而無法使用 CLI，您仍然可以使用 CLI 作為指導。 只需在一邊生成新項目，使用vue inspect命令檢查它正在使用的 Webpack 配置和package.json所需的依賴項...

Answer 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也對.eslintrc.js進行了一些小的更改。 在全新安裝中，cli 使"extends"屬性如下：

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

Answer 4

我剛剛在 Rails 中安裝了 Webpacker gem，它附帶了安裝 Vue 的好任務。

盡管如此，它還是安裝了 Vue 2.x 及其加載器和模板編譯器...

要將所有內容都添加到 Vue 3 a 及其依賴項，只需運行：

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

瞧！ 您現在正在使用 Vue 3