前言

事情是这样——小组内部组织一次脑暴，我见组内有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的记录就到这里了，如果对你有帮助希望能一键三连支持一波。