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 配置文件中添加以下代码：

-- -------------------- ---- -------
----- --------------- - --------------------------------

-------------- - -
  ------- -
    ------ -
      -
        ----- ---------
        ------- ------------
      -
    -
  --
  -------- -
    --- -----------------
  -
-

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 配置文件中添加以下代码：

-- -------------------- ---- -------
----- - --------------- - - ---------------------

-------------- - -
  ------- -
    ------ -
      -
        ----- ---------
        ------- ------------
      -
    -
  --
  -------- -
    --- -----------------
  -
-

1. 重新运行 webpack 即可。

示例代码

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

-- -------------------- ---- -------
----------
  ------- ------- --------
-----------

--------
------ ------- -
  ------ -
    ------ -
      -------- ------ --------
    -
  -
-
---------

-------
--- -
  ------ ----
-
--------

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

-- -------------------- ---- -------
----- - --------------- - - ---------------------

-------------- - -
  ------ ----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ------- -
    ------ -
      -
        ----- ---------
        ------- ------------
      -
    -
  --
  -------- -
    --- -----------------
  -
-

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

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

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

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d11d59a941bf713425df22