背景介绍：公司一个主要运营平台随着两三年的需求迭代开发，已经越来越庞大了，每次启动时间以分为单位，故急需vite这样的前端开发及构建工具来优化启动时间。

改造步骤（新建的小项目为例）

将public中index.html 文件移动与src平级的根目录下

新增vite.config.js、删除vue.config.js

修改依赖配置package.json

• 删除devDependencies中@vue/cli-开头的依赖
• 新增vite 依赖
• 重新安装依赖，

改造遇到的问题：

• vite中引入默认没有.vue，所以要手动配置下配置说明文档（建议写的时候就带上后缀）

extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']

• 含有jsx写法的vue文件编译会出错，需要加上jsx脚本语言说明lang="jsx"

<template>
  <div>system-management</div>
</template>
<script lang="jsx">
export default {
  name: "SystemManagement",
  compoments: {
    comp1: {
      render: function () {
        return (
          <AnchoredHeading level={1}>
            <span>Hello</span> world!
          </AnchoredHeading>
        );
      },
    },
  },
};
</script>

• webpack的require.content 无法使用，换成vite的import.meta.globEager

require.context("./", true, /\.vue$/)
换成
import.meta.globEager("./**.vue")

其中两个*代表可以遍历到子文件夹，一个 * 就是遍历当前目录下所有

项目git地址：

分支： vite

github.com/ssabc/my-vu…