vue-cli项目改成vite

745 阅读1分钟

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

改造步骤(新建的小项目为例)

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

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

image.png

修改依赖配置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…