Compare commits
No commits in common. "main" and "v2" have entirely different histories.
27
.gitignore
vendored
27
.gitignore
vendored
@ -1,26 +1,21 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
|
||||
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
@ -1,3 +0,0 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
181
README.md
181
README.md
@ -1,23 +1,29 @@
|
||||
# FileViewer 项目Vue3 demo
|
||||
# FileViewer 项目Vue2 demo
|
||||
|
||||
本demo基于vite+ts+vue3构建，如果您需要vue2版本的demo，请拉取v2分支。
|
||||
本demo基于vue-cli+js+vue2.x构建，如果您需要vue3版本的demo，请前往main分支。
|
||||
|
||||
**适用于Vue2 + Webpack，本集成方法要求最低Webpack版本为5，也就是Vue Cli Service 5.0.0以上，当然，iframe集成没有任何限制**
|
||||
|
||||
> 注意，为了版本稳定性，在iframe集成的场景下，无论是vue2版本还是vue3版本，都建议使用file-viewer3以获得最佳性能。
|
||||
|
||||
|
||||
|
||||
## 方式一：iframe集成（推荐）
|
||||
|
||||
iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为您的项目快速集成文件预览能力。
|
||||
|
||||
|
||||
### 源码准备
|
||||
下载我们的最新版本的file-viewer源码，然后执行`npm run build`，或者`yarn build`。
|
||||
下载我们的最新版本的file-viewer源码，然后执行`npm build build`，或者`yarn build`。
|
||||
|
||||
### 构建产物集成
|
||||
然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
|
||||
|
||||
如果您在公网，建议您使用我们的cdn：https://viewer.flyfish.dev，以获得高效的访问。
|
||||
如果您在公网，建议您使用我们的cdn：
|
||||
|
||||
https://viewer.flyfish.dev
|
||||
|
||||
以获得高效的访问。
|
||||
|
||||
如果您在内网，可以完全参照本demo进行实施。
|
||||
|
||||
### 添加iframe标签
|
||||
@ -25,7 +31,7 @@ iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为
|
||||
|
||||
1. **使用url控制切换（推荐）**
|
||||
|
||||
这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
|
||||
这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
|
||||
|
||||
2. **使用postMessage发送文件数据**
|
||||
|
||||
@ -34,61 +40,65 @@ iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为
|
||||
示例的`IframeViewer.vue`组件实现如下，该组件同时支持两种文件控制方式，您可以直接集成：
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, onMounted, ref} from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
url?: string,
|
||||
file?: File,
|
||||
name?: string,
|
||||
}>()
|
||||
|
||||
// iframe引用
|
||||
const frame = ref<HTMLIFrameElement>();
|
||||
// iframe路径指向构建产物，这里是/，因为放在了public下面
|
||||
// 如果使用cdn，请使用https://viewer.flyfish.dev
|
||||
const source = '/dist/index.html'
|
||||
// 查看器的源，当前示例为本源，指定为location.origin即可
|
||||
const viewerOrigin = location.origin;
|
||||
// 构建完整url
|
||||
const src = computed(() => {
|
||||
// 文件名称，建议传递，提高体验性
|
||||
const name = props.name || '';
|
||||
if (props.url) {
|
||||
// 直接拼接url
|
||||
return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
|
||||
} else if (props.file) {
|
||||
// 直接拼接来源origin
|
||||
return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
|
||||
} else {
|
||||
return source;
|
||||
}
|
||||
})
|
||||
|
||||
// 发送文件数据
|
||||
const sendFileData = () => {
|
||||
nextTick(() => {
|
||||
const viewer = frame.value;
|
||||
if (!viewer || !props.file) return;
|
||||
viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
sendFileData();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer" />
|
||||
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// 查看器的源，当前示例为本源，指定为location.origin即可
|
||||
const viewerOrigin = location.origin;
|
||||
|
||||
// iframe路径指向构建产物，这里是/，因为放在了public下面
|
||||
// 如果使用cdn，请使用https://viewer.flyfish.dev
|
||||
const source = '/dist/index.html'
|
||||
|
||||
export default {
|
||||
name: 'IframeViewer',
|
||||
props: {
|
||||
url: String,
|
||||
file: File,
|
||||
name: String,
|
||||
},
|
||||
mounted() {
|
||||
this.sendFileData();
|
||||
},
|
||||
computed: {
|
||||
// 构建完整url
|
||||
src() {
|
||||
// 文件名称，建议传递，提高体验性
|
||||
const name = this.name || '';
|
||||
if (this.url) {
|
||||
// 直接拼接url
|
||||
return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
|
||||
} else if (this.file) {
|
||||
// 直接拼接来源origin
|
||||
return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
|
||||
} else {
|
||||
return source;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 发送文件数据
|
||||
sendFileData() {
|
||||
this.nextTick(() => {
|
||||
// iframe引用
|
||||
const viewer = this.$refs.frame;
|
||||
if (!viewer || !this.file) return;
|
||||
viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.iframe-viewer {
|
||||
height: calc(100vh - 2px);
|
||||
width: 100%;
|
||||
border: 0
|
||||
}
|
||||
.iframe-viewer {
|
||||
height: calc(100vh - 2px);
|
||||
width: 100%;
|
||||
border: 0
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
@ -109,41 +119,54 @@ onMounted(() => {
|
||||
|
||||
以下是示例代码：
|
||||
|
||||
`main.ts`
|
||||
`main.js`
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import FileViewer from '@flyfish-group/file-viewer3'
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import FileViewer from '@flyfish-group/file-viewer'
|
||||
|
||||
import '@flyfish-group/file-viewer3/dist/style.css'
|
||||
// 导入样式
|
||||
import '@flyfish-group/file-viewer/dist/style.css'
|
||||
|
||||
Vue.use(FileViewer);
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
||||
createApp(App).use(FileViewer).mount('#app')
|
||||
```
|
||||
|
||||
`InnerViewer.vue`
|
||||
|
||||
```vue
|
||||
<script setup lang='ts'>
|
||||
import {ref} from "vue";
|
||||
|
||||
defineProps<{
|
||||
url: string
|
||||
}>()
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class='simple-view'>
|
||||
<file-viewer :url="url" />
|
||||
</div>
|
||||
<div class='simple-view'>
|
||||
<file-viewer :url="url" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'InnerViewer',
|
||||
props: {
|
||||
url: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.simple-view {
|
||||
width: 100%;
|
||||
height: calc(100vh - 2px);
|
||||
}
|
||||
.simple-view {
|
||||
width: 100%;
|
||||
height: calc(100vh - 2px);
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
需要注意的是，内置组件`file-viewer`支持使用data的方式传入文件的二进制数据，您可以自行从服务器拉取集成。以下是组件API。
|
||||
|
||||
| 属性名 | 类型 | 示例 | 属性描述 |
|
||||
| ------ | --------------------------- | ---------------------------- | --------------------------------------------------------- |
|
||||
| file | File \| Blob \| ArrayBuffer | new Blob(...) | 支持文件、二进制blob和arraybuffer数组缓存 |
|
||||
| url | String | "https://flyfish.dev/1.docx" | 支持任意服务器文件url，需要支持跨域访问，即存在cors响应头 |
|
||||
|
||||
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
13
index.html
13
index.html
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FileViewer3集成示例</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
8617
package-lock.json
generated
8617
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
@ -1,26 +1,44 @@
|
||||
{
|
||||
"name": "file-view-demo",
|
||||
"version": "0.0.0",
|
||||
"name": "file-view-demo-vue2",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --noEmit"
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@flyfish-group/file-viewer3": "^1.0.2",
|
||||
"vue": "^3.2.47"
|
||||
"@flyfish-group/file-viewer": "^1.0.4",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^2.6.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.14.2",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"typescript": "~4.8.4",
|
||||
"vite": "^4.1.4",
|
||||
"vue-tsc": "^1.2.0"
|
||||
}
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
|
||||
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
65
src/App.vue
65
src/App.vue
@ -1,17 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue";
|
||||
import InnerViewer from './components/InnerViewer.vue'
|
||||
import IframeViewer from "./components/IframeViewer.vue";
|
||||
import excel from '@/assets/excel.xlsx?url'
|
||||
import pdf1 from '@/assets/666.pdf?url'
|
||||
import pdf2 from '@/assets/888.pdf?url'
|
||||
|
||||
|
||||
// 预览的url
|
||||
const url = ref<string>(excel);
|
||||
// 提供inner和embedded
|
||||
const mode = ref<string>('inner');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
@ -41,26 +27,53 @@ const mode = ref<string>('inner');
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InnerViewer from './components/InnerViewer'
|
||||
import IframeViewer from "./components/IframeViewer";
|
||||
|
||||
// 测试文件，这些文件实际情况可能是其他服务器链接
|
||||
const excel = 'excel.xlsx';
|
||||
const pdf1 = '666.pdf';
|
||||
const pdf2 = '888.pdf';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
url: excel,
|
||||
mode: 'inner',
|
||||
excel,
|
||||
pdf1,
|
||||
pdf2,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
InnerViewer,
|
||||
IframeViewer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
width: 230px;
|
||||
height: 100vh;
|
||||
padding-left: 8px;
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
width: 230px;
|
||||
height: 100vh;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
header .wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
@ -1,56 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, onMounted, ref} from "vue";
|
||||
<template>
|
||||
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
|
||||
</template>
|
||||
|
||||
const props = defineProps<{
|
||||
url?: string,
|
||||
file?: File,
|
||||
name?: string,
|
||||
}>()
|
||||
<script>
|
||||
|
||||
// 查看器的源，当前示例为本源，指定为location.origin即可
|
||||
const viewerOrigin = location.origin;
|
||||
|
||||
// iframe引用
|
||||
const frame = ref<HTMLIFrameElement>();
|
||||
// iframe路径指向构建产物，这里是/，因为放在了public下面
|
||||
// 如果使用cdn，请使用https://viewer.flyfish.dev
|
||||
const source = '/dist/index.html'
|
||||
// 查看器的源，当前示例为本源，指定为location.origin即可
|
||||
const viewerOrigin = location.origin;
|
||||
// 构建完整url
|
||||
const src = computed(() => {
|
||||
// 文件名称，建议传递，提高体验性
|
||||
const name = props.name || '';
|
||||
if (props.url) {
|
||||
|
||||
export default {
|
||||
name: 'IframeViewer',
|
||||
props: {
|
||||
url: String,
|
||||
file: File,
|
||||
name: String,
|
||||
},
|
||||
mounted() {
|
||||
this.sendFileData();
|
||||
},
|
||||
computed: {
|
||||
// 构建完整url
|
||||
src() {
|
||||
// 文件名称，建议传递，提高体验性
|
||||
const name = this.name || '';
|
||||
if (this.url) {
|
||||
// 直接拼接url
|
||||
return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
|
||||
} else if (props.file) {
|
||||
return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
|
||||
} else if (this.file) {
|
||||
// 直接拼接来源origin
|
||||
return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
|
||||
} else {
|
||||
} else {
|
||||
return source;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 发送文件数据
|
||||
const sendFileData = () => {
|
||||
nextTick(() => {
|
||||
const viewer = frame.value;
|
||||
if (!viewer || !props.file) return;
|
||||
viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 发送文件数据
|
||||
sendFileData() {
|
||||
this.nextTick(() => {
|
||||
// iframe引用
|
||||
const viewer = this.$refs.frame;
|
||||
if (!viewer || !this.file) return;
|
||||
viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
sendFileData();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.iframe-viewer {
|
||||
height: calc(100vh - 2px);
|
||||
width: 100%;
|
||||
border: 0
|
||||
height: calc(100vh - 2px);
|
||||
width: 100%;
|
||||
border: 0
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<script setup lang='ts'>
|
||||
import {ref} from "vue";
|
||||
|
||||
defineProps<{
|
||||
url: string
|
||||
}>()
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class='simple-view'>
|
||||
<file-viewer :url="url" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'InnerViewer',
|
||||
props: {
|
||||
url: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.simple-view {
|
||||
width: 100%;
|
||||
|
||||
14
src/main.js
Normal file
14
src/main.js
Normal file
@ -0,0 +1,14 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import FileViewer from '@flyfish-group/file-viewer'
|
||||
|
||||
// 导入样式
|
||||
import '@flyfish-group/file-viewer/dist/style.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(FileViewer);
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
@ -1,8 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import FileViewer from '@flyfish-group/file-viewer3'
|
||||
|
||||
import './assets/main.css'
|
||||
import '@flyfish-group/file-viewer3/dist/style.css'
|
||||
|
||||
createApp(App).use(FileViewer).mount('#app')
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import {fileURLToPath, URL} from 'node:url'
|
||||
|
||||
import {defineConfig} from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), vueJsx()],
|
||||
base: './',
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'./node_modules/@flyfish-group/file-viewer3/dist/components',
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
7
vue.config.js
Normal file
7
vue.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
// 我们使用根节点，如果使用其他子目录，请设置具体的路径映射
|
||||
publicPath: '/',
|
||||
// 默认转换依赖
|
||||
transpileDependencies: true
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user