无法解析从“src/main.ts“导入“/mode_modules/vant/lib/vant/es/button/style/index

问题:无法解析从"src/main.ts"导入"/mode_modules/vant/lib/vant/es/button/style/index,引用路径中多了vant/es.
解析:
根据node.js版本不同查看node_modules中vant组件,然后判断是用…/es/$name/style还是vant/es/${name}/style/index,
node v16.20.2用的是vant/es/${name}/style/index,版本不用引用的东西也不同

解决方法:在vite.config.ts文件中找到plugins->styleImport,修改引入路径为…/es/${name}/style

  plugins: [
    vue(),
    viteCompression({
      ext: '.gz', // gz br
      algorithm: 'gzip', // brotliCompress gzip
      deleteOriginFile: false, // 打包完成后删除源文件
    }),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`,
        },
      ],
    }),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后重新加载!