Using the vite tool to create a Vue.js 3.0 project, an error is reported when starting the project js syntax error

Use the vite tool to build the vue3 project 

## 使用vite创建vue3项目vite_prj
npm init vite-app vite_prj

## 进入vite_prj项目
cd vite_prj

## 安装依赖
npm install

## 安装依赖后提示有风险
## 3 vulnerabilities (2 low, 1 high)
## To address all issues (including breaking changes), run:
## npm audit fix --force

## 按照提示运行命令，打补丁修复漏洞
npm audit fix --force

## 启动项目
npm run dev

 Start project error:

Using the vite tool to create a Vue.js 3.0 project, an error is reported when starting the project Failed to parse source for import analysis because the content contains invalid JS syntax.

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
12:08:44 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

Solution

1. First install the dependent plugin

npm install @vitejs/plugin-vue -D

2. Then create a vite project configuration file: vite.config.js

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

3. Rerun

npm run dev