前言

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

Logo

前往低代码交流专区

更多推荐