目录

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 项目环境

  • vue3
  • yarn 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

几个关键文件信息：

<!--------------App.vue-------------->
<template>
hello world
</template>

<script>
export default {}
</script>

<!--------------index.html-------------->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Vite</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

//--------------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  |  <template>hello world</template>
     |                                  ^
  2  |  
  3  |  <script>
      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个地方要修改

  1. 需要根据提示安装@vitejs/plugin-vue
npm install @vitejs/plugin-vue
  1. 在项目根目录下新增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
  1. 在项目下运行时用yarn vite或npm vite而不是单独一个vite

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

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间
cover

在华为开发者空间，简单几步带你实现AI风格化编程

avatar 华为开发者空间
cover

GaussDB技术解读——GaussDB架构介绍（四）

avatar 华为开发者空间