Vue Vite初学报错大全

2022-08-07

Table of Contents

## 项目环境

机器：mac

框架：vue3

版本：vue=^3.0.4

###报错信息

[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、安装Vite及初始化项目

npm init vite-app vue3demo004
npm install
npm run dev

2、手动配置完项目后，项目目录如下

├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── index.css
│   └── main.js

###关键文件信息

package.json

{
  "name": "vue3demo004",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.4",
    "vite": "^3.0.4"
  }
}

app.vue

<template>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

###报错信息分析

1、npm run dev后, Terminal显示报错，报错信息如下

3:41:19 PM [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: /Users/username/Documents/4_code/learnvue/vue3demo004/src/App.vue
  3  |      <img alt="Vue logo" src="./assets/logo.png" />
  4  |      <HelloWorld msg="Hello Vue 3.0 + Vite" />
  5  |  </template>
     |             ^
  6  |  
  7  |  
      at formatError (file:///Users/username/Documents/4_code/learnvue/vue3demo004/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:35035:46)
      at TransformContext.error (file:///Users/username/Documents/4_code/learnvue/vue3demo004/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:35031:19)
      at TransformContext.transform (file:///Users/username/Documents/4_code/learnvue/vue3demo004/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:40116:22)
      at async Object.transform (file:///Users/username/Documents/4_code/learnvue/vue3demo004/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:35284:30)
      at async loadAndTransform (file:///Users/username/Documents/4_code/learnvue/vue3demo004/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:39812:29) (x4)

###解决办法

1、根据Terminal报错提示安装@vitejs/plugin-vue

npm i @vitejs/plugin-vue

2、在项目根目录下新增vite.config.js文件，内容如下

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [vue()]
})

3、新增vite.config.js后的项目目录如下

├── node_modules      
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── index.css
│   └── main.js
└── vite.config.js

4、重新运行npm run dev

➜  vue3demo004 git:(master) ✗ npm run dev 

> vue3demo004@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v3.0.4  ready in 299 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose

重新运行后，发现已经可以正常访问页面。