vite 無法從 vite.config.js 載入配置，

Question

我透過執行這些操作建立了一個新的 vue 應用程式（根據 vue 文件）

1. npm init vue@latest
2. npm install
#

然後我嘗試執行 npm run dev。然後就發生了這種情況。

我的環境就是這些

#

• 作業系統 => Ubuntu
• 節點版本 => 18.7.0
• npm 版本 => 8.15.0

我的package.json

{
  "name": "vue-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "vite": "^3.0.4"
  }
}

我的 vite.config.js

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

我已經搜尋了一段時間但沒有結果。提前致謝。

Answer 1

我這裡也有同樣的問題。看起來輸出會針對瀏覽器執行進行最佳化，瀏覽器不存在諸如“path、fs 等”之類的模組。這是有道理的，因為它是 Nodejs 本身的一部分。它無法在瀏覽器中運行。到目前為止，這是我的假設。

查看各種解決方案以了解我為何做出這些假設。

https://github.com/vitejs/vite/discussions/6849 https://github.com/vitejs/vite/issues/7821#issuecomment- 1142328698

#https://github.com/marcofugaro/browserslist-to-esbuild https://esbuild.github.io/getting-started/

鑑於這些訊息，我更喜歡一個更簡單的解決方案來防止使用 Vite 作為捆綁器建置失敗。

配置 rollupOptions

我認為最簡單的解決方案是定義外部。 https://rollupjs.org/configuration-options/#external

import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            name: 'myLib',
            fileName: 'myLib',
        },
        rollupOptions: {
            external: [/^node:\w+/], // <-- ignores all 'node:*'
        },
    },
});

Answer 2

終於找到解決辦法了。 問題是由於 package.json 檔案衝突造成的。 Vite 使用了位於專案父目錄中的錯誤 package.json 文件，而不是專案自己的 package.json 文件。就像這樣 -

• ~/package.json（錯誤的檔案）
• ~/Projects/VueProject/package.json（正確的檔案）

所以刪除錯誤的文件，問題就會解決。

感謝這個github問題的答案 package.json:1:0: 錯誤：檔案意外結束