无法解决 Vite HTML 加载器文件错误。

huangapple go评论71阅读模式
英文:

Can not resolve Vite html loader file error

问题

I am using vite for a project, but when I run npm run dev I get the error
Failed to scan for dependencies from entries: <path>/Learning/Vite-test/index.html

[ERROR] No loader is configured for ".html" files: index.html

I do not know what may be causing the error (and it seems either new or specific to my case) as I am still learning and do not seem to find any issue related through search.

我正在使用 Vite 进行项目开发,但当我运行 npm run dev 时,我遇到了以下错误:

从条目扫描依赖项失败:
  <path>/Learning/Vite-test/index.html

[ERROR] 未为 ".html" 文件配置任何加载器: index.html

我不知道是什么导致了这个错误(而且它似乎是新的或特定于我的情况),因为我还在学习,而且似乎无法通过搜索找到任何相关的问题。

I tried installing html loader and adding it to the vite configuration file but it did not change anything.

我尝试安装了 html loader 并将其添加到 Vite 配置文件中,但没有改变任何事情。

The following is my vite configuration file:
以下是我的 Vite 配置文件:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    resolve: {
      extensions: ['.js', '.ts', '.vue', '.json', '.html'],
    },
    module: {
      rules: [
        {
          test: /\.html$/i,
          loader: 'html-loader',
        },
      ],
    },
  }
})

I also get a similar error when creating projects with Vue/cli which is:
当使用 Vue/cli 创建项目时,我也遇到了类似的错误:

Compiling...

 ERROR  Failed to compile with 1 error 8:24:19 PM
 error 

Module not found: Error: Can't resolve '<path>\learn-vuetify\node_modules\webpack-dev-server\client\index.js?protocol=ws&amp;hostname=192.168.8.106&amp;port=8080&amp;pathname=%2Fws&amp;logging=none&amp;progress=true&amp;overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&amp;reconnect=10&amp;hot=true&amp;live-reload=true' in '<path>\learn-vuetify'

ERROR in Module not found: Error: Can't resolve '<path>\learn-vuetify\node_modules\webpack-dev-server\client\index.js?protocol=ws&amp;hostname=192.168.8.106&amp;port=8080&amp;pathname=%2Fws&amp;logging=none&amp;progress=true&amp;overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&amp;reconnect=10&amp;hot=true&amp;live-reload=true' in '<path>\learn-vuetify'

webpack compiled with 1 error

我有一些想法:

  1. 与 Windows 中的某些本地安全选项相关
  2. 安装 Node.js 时出现问题
  3. 依赖项损坏(可能有人遇到了同样的错误,但没有人遇到 - 稀有情况)。

我不知道具体原因... 请帮忙排查!

英文:

I am using vite for a project, but when I run npm run dev I get the error
Failed to scan for dependencies from entries:
&lt;path&gt;/Learning/Vite-test/index.html

[ERROR] No loader is configured for &quot;.html&quot; files: index.html

I do not know what may be causing the error (and it seems either new or specific to my case) as I am still learning and do not seem to find any issue related through search.

I tried installing html loader and adding it to the vite configuration file but it did not change anything.

The following is my vite configuration file:

import { fileURLToPath, URL } from &#39;node:url&#39;

import { defineConfig } from &#39;vite&#39;
import vue from &#39;@vitejs/plugin-vue&#39;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      &#39;@&#39;: fileURLToPath(new URL(&#39;./src&#39;, import.meta.url))
    },
    resolve: {
      extensions: [&#39;.js&#39;, &#39;.ts&#39;, &#39;.vue&#39;, &#39;.json&#39;, &#39;.html&#39;],
    },
    module: {
      rules: [
        {
          test: /\.html$/i,
          loader: &#39;html-loader&#39;,
        },
      ],
    },
  }
})

I also get a similar error when creating projects with Vue/cli which is:

Compiling...


 ERROR  Failed to compile with 1 error                                                                                8:24:19 PM
 error 

Module not found: Error: Can&#39;t resolve &#39;&lt;path&gt;\learn-vuetify\node_modules\webpack-dev-server\client\index.js?protocol=ws&amp;hostname=192.168.8.106&amp;port=8080&amp;pathname=%2Fws&amp;logging=none&amp;progress=true&amp;overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&amp;reconnect=10&amp;hot=true&amp;live-reload=true&#39; in &#39;&lt;path&gt;\learn-vuetify&#39;

ERROR in Module not found: Error: Can&#39;t resolve &#39;&lt;path&gt;\learn-vuetify\node_modules\webpack-dev-server\client\index.js?protocol=ws&amp;hostname=192.168.8.106&amp;port=8080&amp;pathname=%2Fws&amp;logging=none&amp;progress=true&amp;overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&amp;reconnect=10&amp;hot=true&amp;live-reload=true&#39; in &#39;&lt;path&gt;\learn-vuetify&#39;

webpack compiled with 1 error

I have some ideas in mind:

  1. Related and caused by some local security option in windows
  2. Something went wrong when installing node
  3. Corrupt dependencies (someone could have had the same error, but no one did - rare).

I have no idea for the cause ... please help!!!

答案1

得分: 1

问题出在本地,如预期的那样!问题是路径太长且包含空格,所以不要使用:

D:/folder/sub folder/ 1 sub folder/ another_subfolder/some-more/myProject

而要使用:

D:/folder/sub_folder/myProject

祝大家好运。

英文:

The problem was local as expected!!
It was that the path was too long and containing spaces, so instead of using:

D:/folder/sub folder/ 1 sub folder/ another_subfolder/some-more/myProject

Use:

D:/folder/sub_folder/myProject

Good Luck everyone.

答案2

得分: 1

我遇到了相同的错误,问题出在路径上。
我的路径是:

E:\#Development\MERN\R\First-app

路径中的 # 导致了问题。
现在对我来说已经正常工作了。

新路径:

E:\Development\MERN\R\First-app
英文:

I encountered same error and the problem was with the path
My Path was:

E:\#Development\MERN\R\First-app

This # in the path was causing the issue.

well it works fine for me now.

New Path:

E:\Development\MERN\R\First-app

答案3

得分: 0

我遇到了相同的问题。我不得不卸载了我的电脑上的防病毒软件(Smadav)。

英文:

I encountered the same problem. I had to uninstall the anti-virus(Smadav) on my computer.

huangapple
  • 本文由 发表于 2023年5月7日 22:45:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76194610.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定