公司有一个项目代码，因为每次构建打包的速度非常慢，导致每次本地开发保存文件后都会重新构建下，严重拖慢了本地效果预览和开发效率。所以在慢慢尝试如何迁移到vite中，当然这会是一个漫长的过程。

因此此篇文章会详细介绍迁移中遇到的各种问题等...

webpack和vite对比

初始化vite项目

npm create vite@latest

因为我们的项目是vue2版本，vite初始化的vue模板是vue3，所以你的项目非vue3，建议直接选Vanilla初始化模板

这里建议直接选Vanilla普通的，无特色的模板。后面就是先卡卡的往里面复制老项目的东西，坐等报错，解决问题。

记得修改index.html中main.js的引用路径哦~~

 <script type="module" src="/src/main.js"></script>

遇到的问题

vue2插件下载配置

因为vite默认是支持vue3的，所以是vue2项目的话，需要下载对应的vue2插件@vitejs/plugin-vue2

npm i -D @vitejs/plugin-vue2

新建一个vite.config.js配置以下代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue2";
export default defineConfig({
  plugins: [vue()]
});

resolve.alias 文件别名配置

在vite.config.js中配置对应的快捷访问目录

import { fileURLToPath, URL } from "node:url";
...
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "common": fileURLToPath(new URL("./src/common", import.meta.url)),
      "components": fileURLToPath(new URL("./src/components", import.meta.url)),
      "api": fileURLToPath(new URL("./src/api", import.meta.url)),
      "store": fileURLToPath(new URL("./src/store", import.meta.url)),
      "views": fileURLToPath(new URL("./src/views", import.meta.url)),
      "static": fileURLToPath(new URL("./static", import.meta.url)),
    }
  }
...

npm install -D sass

错误就是这么提示的，直接按照要求安装一下就可以了

element-ui样式报错

一般是sass版本太高，导致不兼容原来的element样式，所以可以采用手动降低版本

npm install sass@1.30.0 -D

scss全局样式引入的报错

即便有在全局引入配置的样式变量，但是还有这种报错。

在vite.config.js中配置对应的css.preprocessorOptionscss预处理器，引入的路径就是你配置的全局样式变量的文件路径。

...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/style/variables.scss";`,
      },
    }
  }
...

element-ui 全局样式引入错误

vite不支持使用~，改成node_modules/引入

@import "node_modules/element-ui/packages/theme-chalk/src/index";

或者通过CDN的方式引入样式

<!-- 引入样式 --> 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

/App 不带.vue报错

在vite.config.js中配置resolve.extensions，以便省略导入时要加扩展名

...
  resolve: {
    ...
    extensions: [".vue", ".js", ".json"],
  }

/deep/或者>>>深度选择器报错

可以用 ::v-deep替换掉，但是不支持嵌套在scss里面写，否则不生效

vue2+webpack转vite项目迁移过程