用vite2开发vue2项目爬坑

最新推荐文章于 2025-09-18 16:16:36 发布

原创最新推荐文章于 2025-09-18 16:16:36 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

vite

1 篇文章

订阅专栏

本文介绍了在使用vite2构建vue2项目时遇到的问题，包括less的路径配置、vue编译的适配、Vant组件按需引入的差异，以及vite对新语法的支持限制。在less配置中，vite需要特别设置路径别名，而对Vant的按需引入，作者发现其在js中并非按需，但在样式上是按需的。此外，由于node对win7的支持问题，可能导致新特性无法使用，但可以通过修改vite配置解决。

less

原项目中用的相对路径~@/style/..，在vite里的路径别名还得为~@专门配置，不像webpack只需配置@的路径别名
对less的配置参数不用加lessOptions

  css: {
    preprocessorOptions: {
      less: {
        globalVars: {
            hack: 'true; @import \'~@/style/var.less\';'
        }
      }
    }
  }

vue编译

由于自带的plugin是对vue3编译的，会报错，所以换成vite-plugin-vue2

vant

在对Vant按需引入时，使用vite-plugin-imp可是解决，具体配置得参考readme，和原来的babel插件还是有点不一样的（~~发现对js并不是按需引入，是整个js引入~~（看了源码，开发环境是整个引入，打包是按需的），样式是按需引入）

vite

node居然放弃了win7，导致我升不了node，所以可选链等新特性用不了【狗头】。如果使用vite.config.ts中碰到新语法不支持，则可以到vite下的dist/node/chunk下某一个文件找bundleConfigFile，修改esbuildPlugin的target到低版本，esbuild会处理。