webpack 转 vite 问题集

1：jsx的问题

vue-cli是自动引入的babel的，所以在里面jsx是可以直接用的,比如下面的代码

vnodes.push(<i class={[icon, "sub-el-icon"]} />);

但在vite中会不识别出现

解决方法：

npm install @vitejs/plugin-vue-jsx -D

vite.config.js配置：

import vueJsx from "@vitejs/plugin-vue-jsx";
export default () =>
  defineConfig({
    plugins: [vueJsx()],
  });

找到报错位置配置：

<script lang="jsx">
export default {
  functional: true,
  props: {
    icon: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  render(h, context) {
    const { icon, title } = context.props;
    const vnodes = [];
    if (icon) {
      if (icon.includes("el-icon")) {
        vnodes.push(<i class={[icon, "sub-el-icon"]} />);
      } else {
        vnodes.push(<svg-icon icon-class={icon} />);
      }
    }
    if (title) {
      vnodes.push(<span slot="title">{title}</span>);
    }
    return vnodes;
  },
};
</script>

2：element-ui问题

解决方法：

@import "~element-ui/packages/theme-chalk/src/index";
改写成：
@import "node_modules/element-ui/packages/theme-chalk/src/index";

3:@import导入资源问题

解决方法：

@import "~@/styles/variables.scss";
改写成：
@import "@/styles/variables.scss";

3:SvgIcon问题：

修改方法： segmentfault.com/a/119000003…