vite ツールを使用して Vue.js 3.0 プロジェクトを作成すると、プロジェクトの開始時に js 構文エラーが報告される

vite ツールを使用して vue3 プロジェクトをビルドする 

## 使用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

 プロジェクト開始エラー:

vite ツールを使用して Vue.js 3.0 プロジェクトを作成すると、プロジェクトの開始時にエラーが報告されます。コンテンツに無効な JS 構文が含まれているため、インポート分析のためのソースの解析に失敗しました。

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.

解決

1. まず依存プラグインをインストールします

npm install @vitejs/plugin-vue -D

2. 次に、vite プロジェクト構成ファイル 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. 再実行

npm run dev