vue3项目引用vue-office组件

1. 安装 （vue-demi 0.14.10版本的比较稳定）

npm install @vue-office/excel vue-demi

2. Vite 配置优化

import { resolve } from 'path' resolve: { alias: { '@vue-office': resolve(__dirname, 'node_modules/@vue-office') },

3. 页面中引用

<template> <div class="third-step"> <VueOfficeExcel v-if="showExcel" :src="excelUrl" style="width: 100%; height: 400px;" /> </div> </template> <script setup> import VueOfficeExcel from '@vue-office/excel' import '@vue-office/excel/lib/index.css' const excelUrl = '/example.xlsx' const showExcel = ref(false) onMounted(() => { showExcel.value = true }) </script>

效果