前言
事情是这样——小组内部组织一次脑暴，我见组内有vue3项目但是没有使用vue3官方推荐的vite，表示疑问，然后就引入了接下来的事情，指派我来试水。啊~这感觉真不错。
受命
既然要做我们肯定要先考察考察，诶~功夫不负有心人啊，翻到了一个名叫wp2vite的玩意（这玩意是真坑啊），看了下与之相关博客，诶！又让我找到一个关于webpack-to-vite的仓库，心想那就整吧，这不都齐活了么。
折磨开始
安装wp2vite
npm install -g wp2vite
使用
cd yourwork/your_project // go to your project catalog
wp2vite
or
wp2vite --config=./webpack.config.js // with config file
wp2vite -v // check wp2vite version
npm install // install dependencies
根据以上指引啊，很快就完事了，然后发现多了两个文件和3条命令。既然都多了命令了那就执行吧。
npm run dev // start server
or
npm run vite-start // start server
诶~到这里都是非常丝滑顺畅，但是打开浏览器就不对劲了，访问不了。
问题这不就来了么
1、引入文件省略扩展
我的项目本身没有这个问题，但是由于某个包导致了这个问题，所以可以加上一下配置。
return {
//...
resolve: {
// 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
}
2、vue文件中的script标签带有 lang="jsx"
解1： 干掉 script或者template标签上的 lang 属性
解2：
- vue2可在vite-plugin-vue2中设置
{ jsx: true } - vue3 则需要安装
@vitejs/plugin-vue-jsx此插件 - 如果是
template可以查看这里解决
3、React is not defined
看到这个我人傻了，不过还好，你有张良计，我有过墙梯。
解：在 vite.config.js 中加入，并安装依赖 @vitejs/plugin-vue-jsx
import vueJsx from '@vitejs/plugin-vue-jsx'
return {
//...其它配置项
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment'
},
plugins: [
//...其它插件
vueJsx()
],
}
4、require is not defined
这是由于vite使用的是esm引入，所以并不支持commonJS规范，把require 改为import即可。要是三方包报此类错误。
解：安装vite-plugin-require并在vite.config.js加入以下代码片中的代码，如果是图片资源可以使用new URL(url, import.meta.url)这种方式去引入一个图片，具体点这里
const imgUrl = new URL('./rz-up.png', import.meta.url).href
import vitePluginRequire from "vite-plugin-require"
return {
//...其它配置项
plugins: [
//...其它插件
vueJsx(),
vitePluginRequire()
],
}
5、报错提示 /deep/ 异常选择器
这个问题，是由于你安装了node-sass，需要把node-sass 卸载并安装sass(dart-sass)然后替换/deep/为::v-deep
6、Object.fromEntries() is not a function
由于node 12.x及其以下的不支持Object.fromEntries()所以我们用nvm切换一下node版本即可，这里我使用的是14.15.0的版本就解决了此问题。
nvm use v14.15,0
7、‘decorators-legacy’ isn’t currently enabled
这个问题困扰了我超级久，我整整尝试了两天，终于黄天不负有心人，总算是有了答案。原因是由于vite-plugin-vue2 的作者在设计初衷就希望编译走 esbuild 而不是走 babel ，所以他将入口文件读取.babelrc 默认关闭了，所以导致我怎么修改安装 babel 插件都无法生效。
解：
// 安装这两个解析
yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
安装完成后，找到.babelrc并加入已下代码
{
"assumptions": {
"setPublicClassFields": true
},
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties"]
]
}
开启vite-plugin-vue2读取.babelrc
这个问题能够解决感谢帅小伙这篇博客。
最后
踩了这么多坑，还好都爬出来了，咱现在只想对vite说一句啊~九折啊，还以为你多狠呢，有本事别让我配出来呀。好了关于webpack迁移到vite的记录就到这里了，如果对你有帮助希望能一键三连支持一波。
