先来说说我是如何迁移的：

1.通过vite新建项目

npm init @vitejs/app my-vite --template vue

2.创建好后cd my-vite,将原来vue cli项目中的package.json，然后npm i中的依赖添加到 my-vite下的package.json，然后npm i

3.将原来的vue cli创建的项目中scr整个目录替换到当前vite新建的工程src目录下

4.将public文件下的index.html提到最外层（与src同级）

5.启动项目后，可能遇到各种各样的问题

（1）项目运行后，会发现接口请求报错（出现跨域问题，或者404），这是因为vue中代理和vite中代理有区别解决方法：需要在vite.config.js中配置成vite规定的代理

（2）The package “esbuild-windows-64“ could not be found, and is needed by esbuild

解决办法

npm i esbuild-windows-64

（3）Failed to resolve import "canvas" from "node_modules.vite\deps\mockjs.js，原因网上说是未将Commonjs转成ESM

解决方法：需要安装cjs2esmodule包

// 安装cjs2esmodule
npm install cjs2esmodule --save-dev

安装完后需要修改vite.config.js

// 导入cjs2esmodule
import { cjs2esmVitePlugin } from 'cjs2esmodule' // 将 commonjs 转化为 es module
export default ({ mode }) => {
  return defineConfig({
    plugins: [
      cjs2esmVitePlugin() 
    ]
  })
}

（4）path模块会报错，原因是 vite 源码中设定了不允许在客户端代码中访问内置模块代码解决方法：使用 path-browserify 代替 path 模块，详细内容参考 NPM解释（path-browserify）
然后把上面的 path 引用代码改为下面这样即可

import path from 'path-browserify'

（5）global is not defined，因为 Vite 是 ESM 机制，有些包内部使用了 node 的 global 对象

解决方法：可以通过自建 pollfill，然后在 main.js 顶部引入

// polyfills

// main.js

（6）vite2+vue3引入scss不支持:export,可以查看官方issue，尤大大说‘可能不会支持任何超出当前预处理器支持范围的东西。使用CSS模块代替。

解决方法：

创建variables.module.scss文件

在页面调用

vue脚手架项目从webpack 迁移至 vite

5.启动项目后，可能遇到各种各样的问题

解决办法