前言

之前一直使用Webpack，Vue-cli，有一两个项目中用到Vite，但是担心Vite生态不好，开发和生产打包环境不一致等等，一直没有将主要维护的项目换到Vite。到最近接触到一个的Vite项目，被它生产打包速度给惊艳到了，差不多规模的另一个webpack项目是Vite的两倍或更多，是的生产打包速度，因为在我的印象里，Vite的生产打包和Webpack打包是没什么区别的，虽然开发打包更快，但对于我这种不关机的来说，估计很久才启动一次，也就没那么强烈的感觉换。但经历了几次紧急bug修复，需要在家电脑启动打包的时候，越来越感概，Webpack好慢…..随着Vite稳定迭代，是时候投向Vite了，拥抱ESM。

将项目转到Vite之后，开发打包快了80%左右，打包快了50%左右，打包的体积也减少了40%多。

这里有一个插件，可以自动帮你把webpack转到vite，下面也列了一些需要手动修改的配置，省事不少。

webpack-to-vite/README-zh.md at main · originjs/webpack-to-vite (github.com)

刚好有空，我自己没用这个插件，跟着一步一步折腾一下，也熟悉熟悉Vite，接下来列一下遇到过的问题。希望能帮助到大家。

问题

浏览器支持

Vite默认的构建目标是能支持 原生 ESM 语法的 script 标签、原生 ESM 动态导入 和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持 —— 查看 构建生产版本 章节获取更多细节。

Vite 需要 Node.js 版本 14.18+，16+。有些模板或者需要更高的 Node 版本才能运行，所以需留意控制台的提示，安装适对应的Node版本。

依赖，vite.config.js

在 package.json 中添加需要的 devDependencies 和 dependencies

  • 必要的依赖：vite,
  • Vue2 项目需要的依赖：vite-plugin-vue2
  • Vue3 项目需要的依赖：@vitejs/plugin-vue,

将vite.config.js添加至主目录，配置vite

JSX

如果使用了JSX，在 Vue2 中，需要添加 vite-plugin-vue2 插件并传入 { jsx: true } 配置，在 Vue3 中需要添加 @vitejs/plugin-vue-jsx 插件

package.json 命令更改

从过去的webpack或者vuecli serve 改成 vite

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

环境变量

vite不再向process.env注入项目的环境变量，而是 import.meta.env，并且vite配置不能直接用环境变量 需要用loadEnv

//vite.config.js
export default defineConfig({mode} =>
  const env = loadEnv(mode, process.cwd())
)

index.html

在Vite中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

添加入口：<script type="module" src="/src/main.js"></script>

require，require.context，CJS

require是CJS的语法，Vite本身就是基于ESM，Vite的性能那么好也是因为ESM，所以不建议用CJS的语法，如果实在要用需要使用插件 @originjs/vite-plugin-commonjs

require.context可使用import.meta.glob代替

重命名

alias写法更改

resolve: {
  alias: [
      {
        find: '@',
        replacement: resolve(__dirname, '../src')
      },
      {
        find: 'antd',
        replacement: 'ant-design-vue'
      }
    ]
}

css

如果之前使用的是vue-cli并且配置了css.loaderOptions，需改一下路径

css.loaderOptions -> css.preprocessorOptions

不支持带有变量的动态import

Vite不支持import(/src/views/${dir}.vue)这种动态import，需换成import.meta.glob

Unocss

如果有用unocss，要改一下插件，换成unocss/vite

UnoCSS Vite 插件 (nodejs.cn)

gitHook

如果你使用vuecli，并且开始了githook，那么在Vite中,需要引入一些york，或者使用husky，因为vuecli内置了york，而vite不内置

svg

如果之前有使用svg-sprites-loader导入svg的，但因为其是webpack Loader，在Vite无法使用，转Vite后可使用vite-plugin-svg-icons代替。使用方法有修改：

  1. vite.config.js-plugins

    import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
       
    createSvgIconsPlugin({
       iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
       symbolId: 'icon-[dir]-[name]',
       svgoOptions: process.env.NODE_ENV === 'production'
     })

  2. 在main.js引入

    import 'virtual:svg-icons-register'

worker

web worker 脚本可以直接通过添加一个 ?worker 或 ?sharedworker 查询参数来导入。默认导出一个自定义的 worker 构造器：

import MyWorker from './worker?worker'

const worker = new MyWorker()

推荐插件

unplugin-vue-components 自动按需引入组件

可配置importStyle：true自动引入css，不想在index放所有css，可配置importStyle：less但是style：less特别烦，每次引入需要reload，可在开发配置false，生产配置importStyle：less，并在开发plugins添加一下

{
  name: 'antd-style-import',
  transform(code, id) {
    if (id.endsWith('main.js')) {
      return `
      import 'ant-design-vue/dist/antd.less'
      ${code}
      `
    }
  }
}

或者在main.js手动判断环境添加。

但是这里unplugin-vue-components（importStyle：less）识别不了在template外的引用，特别是messgae，modal等这些，这种我们通常会在页面中手动引入，

import {messgae} from 'ant-design-vue'

但是这种就需要用到vite-plugin-style-import这个插件