vue2中使用报错

[lmh199504]

提示这个 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup()

package.json文件

{
  "name": "customer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config ./build/webpack.dev.js",
    "build:prod": "rimraf dist && cross-env  NODE_ENV=production webpack --config ./build/webpack.prod.js",
    "build:report": "cross-env use_analyzer=true npm run build:prod",
    "build:api": "node scripts/buildApi.js",
    "build:dll": "webpack --config ./build/webpack.dll.js",
    "yarn install": "yarn"
  },
  "keywords": [],
  "author": "[email protected]",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "7.21.5",
    "babel-loader": "^8.1.0",
    "babel-preset-vue": "^2.0.2",
    "buffer": "^6.0.3",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.1",
    "cross-env": "7.0.3",
    "crypto-browserify": "^3.12.0",
    "css-loader": "0.15.0",
    "file-loader": "^6.0.0",
    "happypack": "~5.0.1",
    "html-webpack-plugin": "^5.3.2",
    "https-browserify": "^1.0.0",
    "jszip": "3.10.1",
    "mini-css-extract-plugin": "^1.6.0",
    "path-browserify": "^1.0.1",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "process": "^0.11.10",
    "sass": "1.48.0",
    "sass-loader": "12.4.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "style-loader": "3.3.1",
    "timers-browserify": "^2.0.12",
    "uglifyjs-webpack-plugin": "2.2.0",
    "url-loader": "^4.1.0",
    "vant": "2.12.47",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.7.8",
    "webpack": "^5.51.1",
    "webpack-bundle-analyzer": "4.7.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0",
    "webpack-visualizer-plugin": "0.1.11"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@tinymce/tinymce-vue": "^3.2.8",
    "@univerjs/core": "0.4.0-alpha.1",
    "@vue-office/docx": "^1.6.2",
    "@vue-office/excel": "^1.7.11",
    "@vue-office/pdf": "^2.0.7",
    "@vue-office/pptx": "^0.0.1",
    "@vue/composition-api": "^1.7.2",
    "archiver": "5.3.1",
    "browser": "^0.2.6",
    "chinese-lunar-calendar": "^1.0.1",
    "dayjs": "1.11.5",
    "echarts": "^4.2.1",
    "handlebars": "4.7.7",
    "js-cookie": "^3.0.5",
    "jsbarcode": "^3.11.5",
    "luckyexcel": "1.0.1",
    "md5": "2.3.0",
    "qrcode": "^1.5.3",
    "store": "^2.0.12",
    "tinymce": "^6.4.1",
    "vue": "^2.7.8",
    "vue-cropper": "^0.5.8",
    "vue-demi": "^0.14.6"
  }
}

对应的组件

<template>
	<div :data-src="previewUrl" style="height: 100%">
		<vue-office-pdf v-if="['pdf'].includes(fileType)" :src="previewUrl" style="height: 100%" />
		<vue-office-docx v-else-if="['docx', 'doc'].includes(fileType)" :src="previewUrl" style="height: 100%" />
		<vue-office-execl v-else-if="['xls', 'xlsx'].includes(fileType)" :src="previewUrl" style="height: 100%" 
		:options="{
			minColLength: 0,
			minRowLength: 0
		}" />
		<VueOfficePptx v-else-if="['pptx'].includes(fileType)" :src="previewUrl" style="height: 100%" />
		<div v-else-if="['jpg', 'png', 'jpeg', 'gif'].includes(fileType)">
			<img :src="previewUrl" alt="" />
		</div>
		<div v-else>暂不支持的文件类型</div>
	</div>
</template>

<script>
	import VueOfficeDocx from "@vue-office/docx";
	//引入相关样式
	import '@vue-office/docx/lib/index.css'
	import VueOfficeExecl from "@vue-office/excel";
	//引入相关样式
	import '@vue-office/excel/lib/index.css'
	import VueOfficePdf from "@vue-office/pdf";
	import VueOfficePptx from "@vue-office/pptx";
	export default {
		props: {
			fileType: {
				type: String
			},
			previewUrl: {
				type: String
			}
		},
		components: {
			VueOfficeDocx,
			VueOfficeExecl,
			VueOfficePdf,
			VueOfficePptx
		}
	}
</script>

<style>
</style>