[vite] Failed to parse source for import analysis because the content contains invalid JS syntax.

目录

在使用vite工具开发Vue.js 3.0项目时，由于配置问题，导致了项目运行报错，错误提示如下：

解决步骤，如下：

1、 首先安装依赖插件

2、接着配置vite项目配置文件：vite.config.js

3、重新运行

---

在使用vite工具开发Vue.js 3.0项目时，由于配置问题，导致了项目运行报错，错误提示如下：

16:17:27 [vite] page reload main.js
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
16:17:28 [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.
  Plugin: vite:import-analysis
  File: /home/projects/vitejs-vite-der4uu/App.vue

这个错误的大概意思是在解析import的资源路径时出错了，因为import的内容不合法JS标识。错误提示是由vite:import-analysis报出。它还提示我们要去安装使用@vitejs/plugin-vue，这个是用来处理.vue后缀的Vue单文件组件的。

所以我们的解决方案就出来了，我们需要安装使用错误提示的插件@@vitejs/plugin-vue。

解决步骤，如下：

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()],
});

这样，我们就为vite项目配置了可以识别解析.vue后缀单文件组件的功能。

3、重新运行

npm run dev

问题到此，完美解决。

bye~