Windows11安装vue3报错找不到layer.css

浏览器报错
ENOENT: no such file or directory, open 'F:\vue-demo\node_modules\vite-plugin-vue-devtools\src\overlay\skin\default\layer.css'
控制台报错
[vite] Internal server error: ENOENT: no such file or directory, open 'F:\vue-demo\node_modules\vite-plugin-vue-devtools\src\overlay\skin\default\layer.css'

移除vite.config.ts中的vite-plugin-vue-devtools

 // vite.config.js 或 vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// 删除以下行
// import vueDevtools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [
    vue(),
    // 删除以下行
    // vueDevtools()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
});

当然，这只是临时解决方案。我们更需要找到根本原因，到底是什么问题导致的vite-plugin-vue-devtools出现错误，报错找不到layer.css。

查找错误最简单的方法就是更换浏览器进行尝试。浏览器的插件也可能会导致vue3安装后出现此类错误。例如“阿明查查1.0.0”，这是一款浏览器的电商插件。安装后与vue3产生冲突，所以会报错找不到layer.css。需要特别注意。