vue.js - 安装了vue loader unmet dependancy但仍然报错

Question

我将 Vue 与单个文件组件和 Webpack 结合使用来编译所有内容。我安装了 vue、vue-loader 和 vue-template-compiler(既作为开发依赖项又作为对等依赖项)，但 vue-loader 返回以下错误。

./resources/assets/js/components/Modal.vue 中的错误 模块构建失败:错误:[vue-loader] vue-template-compiler 必须安装为对等依赖项，或者必须通过选项传递兼容的编译器实现。

我还确保 vue 和 vue-template-compiler 的版本与另一篇关于不同问题的帖子中提到的一致。我不确定我哪里出错了。

这是我的 webpack 配置:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');

require('babel-polyfill');

const inProduction = (process.env.NODE_ENV === 'production');

module.exports = {
  entry: {
    vendor: [
      './index.js',
      'babel-polyfill',
    ],
    main: './resources/assets/js/main.js',
    banner: './resources/assets/js/banner.js',
    video: './resources/assets/js/video.js',
    newsSlider: './resources/assets/js/news-slider.js',
  },

  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    filename: 'assets/js/[name].js',
  },

  externals: {
    jquery: 'jQuery',
  },

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                url: false,
                minimize: false,
                sourceMap: true,
                importLoaders: 1,
              },
            },
            'postcss-loader',
            'sass-loader',
          ],
          fallback: 'style-loader',
        }),
      },

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },

  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },

  plugins: [
    new ExtractTextPlugin('style.css'),

    new VueLoaderPlugin(),

    new webpack.LoaderOptionsPlugin({
      minimize: inProduction,
    }),

    new WebpackNotifierPlugin({
      title: 'WP Theme',
      contentImage: path.resolve('./public/favicon.ico'),
      alwaysNotify: true,
    }),
  ],
};

if (inProduction) {
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin(),
  );
}

还有我的 package.json:

  "dependencies": {
    "@vimeo/player": "^2.6.3",
    "animate.css": "^3.6.1",
    "slick-carousel": "^1.8.1",
    "vue": "^2.5.17"
  },
  "peerDependencies": {
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "autoprefixer": "^8.5.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "glob-all": "^3.1.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.4",
    "purgecss-webpack-plugin": "^0.22.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.21.0",
    "tailwind": "^2.2.0",
    "tailwindcss": "^0.5.3",
    "vue-loader": "^15.4.1",
    "webpack": "^3.10.0",
    "webpack-cli": "^2.1.3",
    "webpack-notifier": "^1.5.1"
  }

Answer 1

当 vue 和 vue-template-compiler 的安装版本不匹配时，通常会发生该错误。您可以使用此命令检查已安装的版本:

npm ls --depth 0

您还可以尝试更新这些软件包，看看是否可以让安装的版本匹配:

npm update vue vue-template-compiler