webpack4 中使用 vue-loader_vue-template-compiler 出现错误的解决方法

在前端开发中，Vue.js 是一个非常流行的前端框架，而 webpack4 则是一个强大的打包工具。在使用 Vue.js 开发时，我们通常会使用 vue-loader 和 vue-template-compiler 这两个插件来将 Vue 组件转换为 JavaScript 模块。但是，在使用 webpack4 打包时，有时会出现一些错误，本文将介绍如何解决这些错误。

错误1：Cannot find module 'vue-template-compiler'

在使用 vue-loader 进行编译时，可能会出现以下错误：

ERROR in ./src/components/HelloWorld.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
Error: Cannot find module 'vue-template-compiler'

出现这个错误的原因是没有安装 vue-template-compiler。解决方法如下：

1. 在项目根目录下执行以下命令安装 vue-template-compiler：

npm install vue-template-compiler --save-dev

1. 在 webpack 配置文件中添加以下代码：

// www.javascriptcn.com code example
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

1. 重新运行 webpack 即可。

错误2：Invalid options object. Vue Loader has been initialized already

在使用 vue-loader 和 vue-template-compiler 时，可能会出现以下错误：

Invalid options object. Vue Loader has been initialized already.

出现这个错误的原因是在 webpack 配置文件中重复引入了 VueLoaderPlugin。解决方法如下：

1. 在 webpack 配置文件中删除以下代码：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [
  new VueLoaderPlugin()
]

1. 在 webpack 配置文件中添加以下代码：

// www.javascriptcn.com code example
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

1. 重新运行 webpack 即可。

示例代码

以下是一个示例代码，其中使用了 vue-loader 和 vue-template-compiler：

// www.javascriptcn.com code example
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

<style>
div {
  color: red;
}
</style>

在 webpack 配置文件中添加以下代码：

// www.javascriptcn.com code example
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

在命令行中执行以下命令：

npm install vue vue-loader vue-template-compiler webpack webpack-cli --save-dev

然后就可以运行 webpack 打包了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d11d59a941bf713425df22