【Vite】使用报错集锦

2023-09-27 07:20| 来源: 网络整理| 查看: 265

目录 1. 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.1 项目环境1.2 问题描述（出现时间：2021年2月26日）1.3 报错内容1.4 解决方案

1. 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.1 项目环境 vue3yarn or npm 1.2 问题描述（出现时间：2021年2月26日）

安装Vite及初始化项目

nrm use npm // 使用官方镜像 npm install -g vite mkdir vite-demo cd vite-demo npm init npm install @vue/compiler-sfc

手动配置完项目后，目录树如下(末尾带*号表示下文会展示其内容)

├─node_modules/ ├─App.vue * ├─index.html * ├─main.js * ├─package.json * ├─package-lock.json └─yarn.lock

几个关键文件信息：

hello world export default {} Hello Vite //--------------main.js-------------- import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') { "name": "vite-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vue": "^3.0.6" }, "devDependencies": { "@vue/compiler-sfc": "^3.0.6", "vite": "^2.0.3" } }

完成后，在项目目录下运行

D:\project\vite-demo> vite vite v2.0.3 dev server running at: > Network: http://192.168.137.1:3000/ > Network: http://169.254.107.122:3000/ > Network: http://169.254.177.61:3000/ > Network: http://192.168.2.125:3000/ > Local: http://localhost:3000/ ready in 687ms.

运行成功后访问地址 http://localhost:3000/，页面为空，shell控制台出现报错

1.3 报错内容 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: D:/project/vite-demo/App.vue 1 | hello world | ^ 2 | 3 | at formatError (D:\project\vite-demo\node_modules\vite\dist\node\chunks\dep-00e79b84.js:45759:46) at TransformContext.error (D:\project\vite-demo\node_modules\vite\dist\node\chunks\dep-00e79b84.js:45755:19) at TransformContext.transform (D:\project\vite-demo\node_modules\vite\dist\node\chunks\dep-00e79b84.js:47215:22) at async Object.transform (D:\project\vite-demo\node_modules\vite\dist\node\chunks\dep-00e79b84.js:45957:30) at async transformRequest (D:\project\vite-demo\node_modules\vite\dist\node\chunks\dep-00e79b84.js:61528:29) at async D:\project\vite-demo\node_modules\vite\dist\node\chunks\dep-00e79b84.js:61630:32 1.4 解决方案

参考了官方的demo项目后（通过命令yarn create @vitejs/app my-vue-app --template vue安装），发现以上操作有3个地方要修改

需要根据提示安装@vitejs/plugin-vue npm install @vitejs/plugin-vue 在项目根目录下新增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()] })

新增后的项目目录见下：

├─node_modules/ ├─App.vue * ├─index.html * ├─main.js * ├─package.json * ├─package-lock.json ├─vite.config.js └─yarn.lock 在项目下运行时用yarn vite或npm vite而不是单独一个vite

以上，配置完成后可以顺利访问到默认页面

【本文地址】

【Vite】使用报错集锦

【Vite】使用报错集锦

今日新闻

推荐新闻