Question

我正在使用Vue和单个文件组件以及Webpack来编译所有内容。我已经安装了vue，vue-loader和vue-template-compiler（均作为开发依赖项和对等依赖项），但是vue-loader返回以下错误。

ERROR in ./resources/assets/js/components/Modal.vue Module build failed: Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

我还确保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

安装了Vue loader未满足依赖性但仍然出错

1 个答案: