【踩坑日志】使用vite构建vue3运行报错

今天学到vue3，使用vite构建。

但是我使用`npm run dev`运行时就会报错

![](https://blog.fivk.cn/usr/uploads/2023/05/2854442310.png)

```bash
X [ERROR] Unexpected end of file in JSON

../package.json:1:0:
      1 │
        ╵ ^

failed to load config from E:\VsCodeProject\study_vue\vue3_test\vite.config.js
error when starting dev server:
Error: Build failed with 1 error:
../package.json:1:0: ERROR: Unexpected end of file in JSON
    at failureErrorWithLog (E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:1636:15)
    at E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:1048:25
    at runOnEndCallbacks (E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:1471:45)
    at buildResponseToResult (E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:1046:7)
    at E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:1075:16
    at responseCallbacks.<computed> (E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:697:9)
    at handleIncomingPacket (E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:752:9)
    at Socket.readFromStdout (E:\VsCodeProject\study_vue\vue3_test\node_modules\esbuild\lib\main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
```

或者

```bash
\ Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)
[vite] Error loading postcss config:server page load...
SyntaxError: E:\VsCodeProject\study_vue\package.json: Unexpected end of JSON input
    at parse (<anonymous>)
    at Module._extensions..json (node:internal/modules/cjs/loader:1322:39)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.search (E:\VsCodeProject\study_vue\vue3_test\node_modules\lilconfig\dist\index.js:112:39)
    at async loadPostcssConfig (E:\VsCodeProject\study_vue\vue3_test\node_modules\vite\dist\node\utils\cssUtils.js:107:39)
    at async Object.resolvePostcssOptions (E:\VsCodeProject\study_vue\vue3_test\node_modules\vite\dist\node\utils\cssU
```

## 报错原因

我在`E:\VsCodeProject\study_vue`目录下新建的vue3_test。但是该目录下有package.json，会影响子目录的配置文件，所以一直启动不了。

> 在其他目录下新建即可。

最后修改：2023 年 05 月 11 日