vite搭建的项目报错 You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.解决办法

Vite 是一个基于浏览器原生 ES imports 的开发服务器，它使用了 Rollup 打包工具来构建项目。如果你在使用 Vite 搭建的项目中出现了 `You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.` 的错误提示，这通常是由于 Vue 被打包进了 bundle 中，导致了重复引用的问题。

解决这个问题的方法是将 Vue 标记为外部依赖，从而将其从 bundle 中排除掉，可以通过在 `vite.config.js` 配置文件中添加如下代码来实现：

export default {
  // ...
  optimizeDeps: {
    exclude: ['vue']
  }
}

这样，Vite 就会将 Vue 视为外部依赖项，并从外部引入它，而不是将它打包进 bundle 中。

需要注意的是，如果你的项目中使用了其他类似的第三方库，也可以通过类似的方式将其标记为外部依赖项，避免出现类似的问题。

相关问题

vite创建vue3项目报错

vite创建vue3项目报错是因为项目中的内容包含了无效的JavaScript语法，导致解析失败。为了解决这个问题，你可以按照以下方法进行操作：

1. 首先，确保你已经全局安装了`create-vite-app`，可以使用命令`npm install -g create-vite-app`进行安装。

2. 接着，使用`create-vite-app`命令创建项目。你可以使用以下命令创建一个名为`vite_prj`的项目：

npm init vite-app vite_prj

3. 进入项目目录：

cd vite_prj

4. 安装项目依赖：

npm install

5. 如果在安装依赖过程中提示有风险和漏洞，可以使用以下命令进行修复：

npm audit fix --force

6. 确保你已经安装了`@vitejs/plugin-vue`插件，如果没有安装，可以使用以下命令进行安装：

npm install @vitejs/plugin-vue -D

7. 创建一个名为`vite.config.js`的项目配置文件，并添加以下内容：

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

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

8. 最后，重新运行项目：

npm run dev

这样应该就能解决vite创建vue3项目报错的问题了。

failed to load config from D:\朗慧\digital-welcome-project\vite.config.ts error when starting dev server: Error: You installed esbuild for another platform than the one you're currently using. This won't work because esbuild is written with native code and needs to install a platform-specific binary executable. Specifically the "@esbuild/win32-x64" package is present but this platform needs the "@esbuild/win32-ia32" package instead. People often get into this situation by installing esbuild on Windows or macOS and copying "node_modules" into a Docker image that runs Linux, or by copying "node_modules" between Windows and WSL environments. If you are installing with npm, you can try not copying the "node_modules" directory when you copy the files over, and running "npm ci" or "npm install" on the destination platform after the copy. Or you could consider using yarn instead of npm which has built-in support for installing a package on multiple platforms simultaneously. If you are installing with yarn, you can try listing both this platform and the other platform in your ".yarnrc.yml" file using the "supportedArchitectures" feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures Keep in mind that this means multiple copies of esbuild will be present. Another alternative is to use the "esbuild-wasm" package instead, which works the same way on all platforms. But it comes with a heavy performance cost and can sometimes be 10x slower than the "esbuild" package, so you may also not want to do that.

这个错误的意思是你在启动开发服务器时遇到了一个错误：无法从 D:\朗慧\digital-welcome-project\vite.config.ts 加载配置。报错的原因是：你在当前平台上安装的 esbuild 与你正在使用的平台不匹配。esbuild 是用本地代码编写的，并且需要安装特定于平台的二进制可执行文件。具体来说，"@esbuild/win32-x64" 包存在，但这个平台需要 "@esbuild/win32-ia32" 包。人们通常会通过在 Windows 或 macOS 上安装 esbuild，然后将 "node_modules" 目录复制到运行 Linux 的 Docker 镜像中，或者在 Windows 和 WSL 环境之间复制 "node_modules" 目录来陷入这种情况。如果你使用 npm 安装，可以尝试在复制文件时不复制 "node_modules" 目录，并在复制后的目标平台上运行 "npm ci" 或 "npm install"。或者你可以考虑使用内置支持同时在多个平台上安装包的 yarn 替代 npm。如果你使用 yarn 安装，可以尝试使用 "supportedArchitectures" 功能在你的 ".yarnrc.yml" 文件中列出这个平台和其他平台：https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures 请注意，这意味着 esbuild 的多个副本将存在。另一种选择是使用 "esbuild-wasm" 包，它在所有平台上都工作方式相同。但它的性能成本很高，有时比 "esbuild" 包慢 10 倍，所以你可能也不想这样做。