[vite] Internal server error: ..........the parser plugin: “optionalChainingAssign“.

最新推荐文章于 2024-12-11 11:50:49 发布

原创最新推荐文章于 2024-12-11 11:50:49 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

本文讲述了在Vue开发过程中遇到的可选链赋值报错，介绍了如何通过在vite.config.js中启用optionalChaining和optionalChainingAssign解析插件来解决这一问题，以及配置JSX相关的选项。

报错记录1： vue 开发赋值报错老是忘记可选链不能赋值哎，便于取值劫持非法空值问题；

eg:

  productListTable.value[listIndex]?.msgList = msgList  // 不可取 可配置解决

这个错误表明您的代码中使用了可选链操作符的赋值语法，而Vite默认情况下不支持这种实验性语法。要解决这个问题，您可以在项目的根目录下创建一个名为 vite.config.js 的文件，并配置Vite来启用相应的解析插件。

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

export default defineConfig({
  plugins: [vue()],
  esbuild: {
    jsxFactory: 'h', // 如果您在项目中使用了JSX语法，需要指定jsxFactory
    jsxFragment: 'Fragment', // 如果您在项目中使用了JSX语法，需要指定jsxFragment
    jsxInject: `import 'vue'`, // 如果您在项目中使用了JSX语法，需要注入Vue依赖
    jsxFactory: '_jsx', // 如果您在项目中使用了JSX语法，需要指定jsxFactory
    jsxFragment: '_jsxFragment', // 如果您在项目中使用了JSX语法，需要指定jsxFragment
    // 启用解析插件
    parserPlugins: ['optionalChaining', 'optionalChainingAssign'],
  },
});