您可能需要一个合适的加载器来处理这种文件类型它不允许在 node_modules 中使用 html

编程问答 2022-05-03

问题描述

我正在使用简单的 vue 项目，并添加了一个名为 vue add electron-builder 的附加包，我的目标是在我打开电子应用程序时触发 server.js 文件。我在 server.js 文件中使用了 pouchdb express。我在 backround.js 中调用了 server.js。我知道由于 babel 导致我面临错误，但我不知道如何在我的项目中进行配置。

vue.config.js

module.exports = {
  pluginoptions: {
    electronBuilder: {
      builderOptions: {
        win: {
          icon: './public/icon.ico'
        }
      }
    }
  }
}

babel.config.js

module.exports = {
 sourceType: 'unambiguous',presets: [
    '@vue/cli-plugin-babel/preset'
  ],ignore: [
    'src/entities/*'
]
}

我遇到了错误

错误 7:50:46 PM 编译失败，出现 1 个错误

 error  in **./node_modules/pouchdb-fauxton/www/index.html**<---this file is not allowing

模块解析失败：意外令牌 (1:0) 您可能需要合适的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

> <!doctype html>
| <html lang="en">
| <head>

 @ ./node_modules/express-pouchdb/lib/routes/fauxton.js 7:32-66
 @ ./node_modules/express-pouchdb/lib sync ^\.\/.*$
 @ ./node_modules/express-pouchdb/lib/index.js
 @ ./backend_db/server.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

解决方法

我认为错误消息是不言自明的：您需要为 html 文件添加 webpack 加载器。

npm install --save-dev html-loader

然后在 vue.config.js 中：

module.exports = {
    chainWebpack: config => {
        config.module
          .rule('html')
          .test(/\.html$/)
          .use('html-loader')
          .loader('html-loader')
      }
}
babel-loaderbabeljspouchdbvue.js