Vue中消除JSX表达式单一父元素限制及关闭Vite项目高亮的方法

1. 消除JSX表达式必须有单个父元素的限制 #

用JSX/TSX写渲染函数时，Vue要求表达式必须有一个根父元素，解决办法有两种：

• 导入Vue的<Fragment>组件当根容器，它不会生成实际DOM节点：

import { Fragment } from 'vue'

export default {
  render() {
    return (
      <Fragment>
        <div>元素1</div>
        <div>元素2</div>
      </Fragment>
    )
  }
}

• 用Fragment的短语法<>，更简洁：

export default {
  render() {
    return (
      <>
        <div>元素1</div>
        <div>元素2</div>
      </>
    )
  }
}

注意：要是用.vue单文件组件的模板语法，本身就支持多根节点，只有写JSX/TSX渲染函数才会碰到这个限制。

2. 关闭元素高亮效果 #

你截图里的高亮，大概率是Vue DevTools浏览器扩展的「高亮选中元素」功能，或者Vite开发服务器的调试高亮，关闭方法如下：

• Vue DevTools导致的高亮：打开浏览器的Vue DevTools面板，点击顶部的高亮按钮（图标是鼠标指针加方框），就能关闭实时元素高亮。
• Vite内置调试高亮：修改vite.config.js/vite.config.ts里的Vue插件配置，把devtools设为false：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({ devtools: false })]
})

另外也可以检查项目里有没有引入开发环境的调试样式文件，有的话注释或删掉就行。

内容的提问来源于stack exchange，提问作者Maaz Rahman