Vuejs 3: Problem with vue-template-compiler

问题

I am trying to integrate vuejs 3 to an existing project which uses webpack. I read about vue-loader, so I am trying to use it.

In the official documentation I have this:

Every time a new version of vue is released, a corresponding version of vue-template-compiler is released together. The compiler's version must be in sync with the base vue package so that vue-loader produces code that is compatible with the runtime. This means every time you upgrade vue in your project, you should upgrade vue-template-compiler to match it as well.

So, when I try to compile I get this error:

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.

But when I try to install vue-template-compiler@3.0.2 I get this error:

❯ 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

How can I solve this problem?

回答1:

To make vue 3 work fine with webpack without using vite or vue cli follow these steps :

init the package.json like :

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

install the last version of vue :

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

install also the dev dependencies that includes @vue/compiler-sfc which replaces 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-loader
file-loader
mini-css-extract-plugin
url-loader
vue-loader
webpack
webpack-cli
webpack-dev-server

create or edit your webpack.config.js with following content :

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
  }
});

Add dev script to run your app :

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

Fill the index.html with following content :

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

Finally run npm run dev the visit http://localhost:8080/

for a ready to use project try to clone this REPOSITORY which built by following the steps above.

回答2:

I believe you need to use vue-loader@next with Vue 3

In Vue 3 the SFC compiler package is no longer vue-template-compiler but compiler-sfc (check here)

I completely agree with the suggestion to use Vue CLI to manage the project - it will save you lot of trouble managing all the dependencies (especially now when Vue 3 ecosystem is trying to catch-up with Vue 3 release and lots of tool event don't have any migration documentation ....like vue-loader)

If you are not able to use CLI because your existing project already have Webpack config, you can still use CLI as a guide. Just generate new project on the side, use vue inspect command to inspect Webpack config it is using and package.json for required dependencies...

回答3:

I upgraded a Vue2 app to Vue3 manually and I was getting this error when I was running the unit tests after upgrading all of the dependencies.

To get everything working, I also had to fix Jest's config file.

In jest.config.js set the "transform" property to:

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

The dependencies I used to get started were from a new Vue3.0 app I created using the cli. Below are the dependencies that my cli settings got me:

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

Note that for my cli settings, the .eslintrc.js also has some minor changes in it for Vue3. In a fresh install the cli makes the "extends" property as below:

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

来源：https://stackoverflow.com/questions/64868632/vuejs-3-problem-with-vue-template-compiler

标签

javascript

Vue.js

Webpack

vuejs3

vue-loader