unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue
https://www.npmjs.com/package/unplugin-vue-components
MIT License
3.76k stars 349 forks source link

Failed to load source map for /node_modules/.vite/chunk-ATV3NNMG.js?v=84e93af0 #242

Open kailong321200875 opened 2 years ago

kailong321200875 commented 2 years ago

在使用自动导入element-plus的时候,会报如下错误。并且,在使用的组件多的时候,会在updating...卡很久才重新刷新页面。 0af7bfdf6aacc94b786e8a26ea4cce9

复现demo,很抱歉使用压缩包的方式: demo.zip

wangwang0517 commented 2 years ago

一样问题 在线等

LLawlight commented 2 years ago

same problem

PiscineMolitorPatel commented 2 years ago

同样的问题

sdynggg commented 2 years ago

困扰我好几天了,什么时候能修复一下。

sxzz commented 2 years ago

Try

// vite.config.ts

import glob from 'fast-glob';

export default defineConfig(async () => {
  const pkgs = [
    ...(
      await glob(['element-plus/es/components/*/style/css.js'], {
        cwd: path.resolve(__dirname, 'node_modules'),
        onlyFiles: true,
      })
    ).map(file => file.replace('.js', '')),
    'element-plus/es',
  ];

  return {
    optimizeDeps: {
      include: [...pkgs],
    },
  }
})
PiscineMolitorPatel commented 2 years ago

这个好像没什么用呢?使用了这个插件以后,首次进入收集依赖的时候会变得特别慢,特别是当某个页面使用了非常多的组件的时候,会出现一直刷新页面的情况,已经严重影响到开发,有什么办法解决吗

sdynggg commented 2 years ago

我研究了个小窍门,多等一会儿,一旦启动成功就不会再出现,当删除node_module重装后就又出现这个问题了。

Lulinx commented 2 years ago

有大佬解决了吗,按需引入就这样

Espero1995 commented 2 years ago

需要引入此插件unplugin-auto-import。 vite.config.ts 使用如下:

import AutoImport from 'unplugin-auto-import/vite';  
import Components from 'unplugin-vue-components/vite';  
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';  
     plugins: [  
          AutoImport({  
               resolvers: [ElementPlusResolver()],  
          }), 
          Components({  
               resolvers: [ElementPlusResolver()],  
          }),  

     ];

如果使用的是ant-design-vue,使用如下:

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 plugins: [  
          AutoImport({
              resolvers: [AntDesignVueResolver()],
              imports: 'vue',
          }), 
          Components({
               resolvers: [
                    AntDesignVueResolver({
                        importStyle: 'css',
                    }),
                 ],
               dts: true, // enabled by default if typescript is installed
          }),
     ];
zhl1232 commented 2 years ago

需要引入此插件unplugin-auto-import。 vite.config.ts 使用如下:

import AutoImport from 'unplugin-auto-import/vite';  
import Components from 'unplugin-vue-components/vite';  
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';  
     plugins: [  
          AutoImport({  
               resolvers: [ElementPlusResolver()],  
          }), 
          Components({  
               resolvers: [ElementPlusResolver()],  
          }),  

     ];

如果使用的是ant-design-vue,使用如下:

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 plugins: [  
          AutoImport({
              resolvers: [AntDesignVueResolver()],
              imports: 'vue',
          }), 
          Components({
               resolvers: [
                    AntDesignVueResolver({
                        importStyle: 'css',
                    }),
                 ],
               dts: true, // enabled by default if typescript is installed
          }),
     ];

看起来没啥用,还是要重新加载好几次。

zhoufanglu commented 2 years ago

有解决没, 太蛋疼了

chenjiaj commented 2 years ago

发现这个是vite的问题,网上找到一个解决方案,亲测有效 https://blog.csdn.net/pzy_666/article/details/123017630