Vite+Inertia+Laravel中vue-pdf-embed包构建及运行异常求助

API 探路者

2026-7-27

解决vue-pdf-embed在Vite打包时的依赖解析问题

问题梳理

使用vue-pdf-embed时，执行npm run build出现Rollup无法解析包的错误；添加build.rollupOptions.external配置后编译通过，但运行时出现模块解析失败，且node_modules中包消失；移除配置后包存在但编译失败。

解决方案

1. 彻底重装依赖，确保包正确安装

先删除现有依赖文件，重新安装以排除依赖缓存或安装不完整的问题：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装所有依赖
npm install

如果使用yarn，对应命令：

rm -rf node_modules yarn.lock
yarn install

2. 移除错误的external配置

build.rollupOptions.external的作用是将指定包排除在打包产物外，要求运行时环境自行提供该模块。你没有配置外部CDN或全局引入，所以运行时会找不到模块。必须删除vite.config.js中这段配置：

// 删掉这段
build: {
  rollupOptions: {
    external: ['vue-pdf-embed']
  }
}

3. 确认导入方式与Vue版本匹配

若使用Vue3，确保安装的是最新版vue-pdf-embed，导入方式为：

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
</script>

若使用Vue2，需安装Vue2适配版本，并调整导入路径：

npm install @vue-pdf-embed/vue2

导入代码：

<script>
import VuePdfEmbed from '@vue-pdf-embed/vue2'

export default {
  components: { VuePdfEmbed }
}
</script>

4. 调整Vite解析配置（可选）

如果仍存在解析问题，可在vite.config.js中添加resolve配置，指定包的入口文件：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 显式指定包的入口文件，适配不同导出格式
    alias: {
      'vue-pdf-embed': 'vue-pdf-embed/dist/vue-pdf-embed.es.js'
    }
  }
})