doc: 文档完善

Author: abu3389

.env.doc

@@ -0,0 +1,3 @@
+NODE_ENV = development
+
+VUE_APP_ENV = doc

.env.docdev

@@ -0,0 +1,3 @@
+NODE_ENV = production
+
+VUE_APP_ENV = doc

.env.docpro

@@ -2,17 +2,17 @@
  * @Author: zhanghan
  * @Date: 2022-11-28 09:13:53
  * @LastEditors: zhanghan
- * @LastEditTime: 2023-01-10 15:07:37
+ * @LastEditTime: 2023-01-11 15:23:46
  * @Descripttion: iframe开发环境配置
  */
 const path = require('path')
-// 获取当前工作目录
-const cwd = process.cwd()
+//  获取基于当前路径的目标文件
+const resolve = (dir) => path.join(__dirname, '../', dir)
 
 module.exports = {
-  publicPath: '/file-viewer',
+  publicPath: './',
   // 放在public下供项目演示时作为iframe入口使用
-  outputDir: path.join(cwd, '/public/file-viewer'),
+  outputDir: resolve('/public/file-viewer'),
   pages: {
     index: {
       entry: 'examples/main.js',

config/config.build.iframe.js

@@ -2,13 +2,13 @@
  * @Author: zhanghan
  * @Date: 2022-11-28 09:13:53
  * @LastEditors: zhanghan
- * @LastEditTime: 2023-01-11 09:26:20
+ * @LastEditTime: 2023-01-11 13:33:12
  * @Descripttion: 文档环境配置
  */
 
 module.exports = {
   outputDir: './docs',
-  publicPath: '/file-viewer-doc',
+  publicPath: './',
   assetsDir: 'static',
   pages: {
     index: {

config/config.doc.js

@@ -2,7 +2,7 @@
  * @Author: zhanghan
  * @Date: 2023-01-10 14:28:29
  * @LastEditors: zhanghan
- * @LastEditTime: 2023-01-11 11:45:47
+ * @LastEditTime: 2023-01-11 13:51:05
  * @Descripttion: 首页
 -->
 <template>
@@ -15,7 +15,7 @@
         <iframe
           scrolling="auto"
           seamless
-          src="/file-viewer/index.html?shoHead=true&&fileUrl=https://home.sharecorner.top/fileTest/pdf.pdf"
+          src="./file-viewer/index.html?shoHead=true&&fileUrl=https://home.sharecorner.top/fileTest/pdf.pdf"
           style="border:0;height: 100%;width:100%"
         />
       </div>

doc/views/Home.vue

@@ -2,7 +2,7 @@
  * @Author: zhanghan
  * @Date: 2023-01-10 14:28:29
  * @LastEditors: zhanghan
- * @LastEditTime: 2023-01-11 11:49:50
+ * @LastEditTime: 2023-01-11 16:20:52
  * @Descripttion: 快速上手
 -->
 <template>
@@ -24,23 +24,35 @@
       >
         file-viewer
       </a>
+      。
       <br />
-      （必须包含file-viewer文件夹，不可重命名，若需要重命名可下载源码重新修改构建）
     </h4>
-    <h4>2、将下载后的文件夹放在项目public文件夹中作为外部公共资源使用</h4>
+    <h4>
+      2、将下载后的file-viewer文件夹整个放在项目公共文件夹中作为外部公共资源使用。
+      <br />
+      （以vue-cli为例，放置在项目public文件夹下；其他框架自行选择合适的公共路径放置）
+    </h4>
     <h3>注意事项：</h3>
-    <h4>* 本项目示例链接随时失效，请勿直接用于生产环境</h4>
-    <h4>* 被浏览的文件链接必须同源或本身支持跨域访问</h4>
+    <h4>* 本项目示例链接随时失效，请勿直接用于生产环境。</h4>
+    <h4>* 被浏览的文件链接必须同源或本身支持跨域访问。</h4>
+    <h4>
+      *
+      若发布生产的项目不在服务器域名根目录，记得配置打包的前缀路径，打包后资源才能被正常引用。（以vue-cli为例，配置
+      <code>vue.config.js</code>
+      的
+      <code>publicPath: './'</code>
+      ； 其他框架请自行选择合适的配置文件进行配置）
+    </h4>
     <br />
 
-    <h4>一般url传入使用</h4>
+    <h3>一般url传入使用</h3>
     <section class="demo">
       <div
         class="section-content swiper"
         style="height: 500px;overflow: hidden;"
       >
         <iframe
-          src="/file-viewer/index.html?fileUrl=https://home.sharecorner.top/fileTest/pdf.pdf"
+          src="./file-viewer/index.html?fileUrl=https://home.sharecorner.top/fileTest/pdf.pdf"
           scrolling="auto"
           style="border:0;height: 100%;width:100%"
         />
@@ -54,7 +66,19 @@
       </Collapse>
     </section>
 
-    <h4>支持二进制文件流消息推送</h4>
+    <h3>支持二进制文件流消息推送</h3>
+    <h3>注意事项：</h3>
+    <h4>
+      *
+      若为node环境，且发布生产的项目不在服务器域名根目录，这将导致生产和开发环境的引用路径不一致（由于动态赋值的路径只会被编译器原样解析，需要特别注意通过配置打包的前缀路径也不会对此次生效，例如
+      <code>vue-cli</code>
+      的
+      <code>publicPath</code>
+      ），可通过
+      <code>process.env.NODE_ENV</code>
+      进行手动判断。
+    </h4>
+    <h4>* 若为浏览器环境，若有需要可在前面配置统一前缀路径即可。</h4>
     <section class="demo">
       <div
         class="section-content swiper"
@@ -101,7 +125,7 @@ import { config } from '../config'
 
 const iframeSnippet = `
 <iframe
-  src="/file-viewer/index.html?fileUrl=https://home.sharecorner.top/fileTest/pdf.pdf"
+  src="./file-viewer/index.html?fileUrl=https://home.sharecorner.top/fileTest/pdf.pdf"
   scrolling="auto"
   style="border:0;height: 100%;width:100%"
 />
@@ -119,7 +143,12 @@ export default {
       context: {
         // 查看器的地址
         // 自己项目内部署需要将编译后的产物file-viewer放在public文件夹中使用,编译后的产物需要下载，下载链接在文档上
-        origin: location.origin + '/file-viewer/index.html',
+        // 若为node环境，且发布生产的项目不在服务器域名根目录，这将导致生产和开发环境的引用路径不一致（由于动态赋值的路径只会被编译器原样解析，需要特别注意通过配置打包的前缀路径也不会对此次生效，例如vue-cli的publicPath），可通过process.env.NODE_ENV进行手动判断
+        // origin: location.origin + process.env.NODE_ENV === 'production'
+            ? '/你的前缀路径（没有可去除）/file-viewer/index.html'
+            : '/file-viewer/index.html',
+        // 若为浏览器环境，若有需要可在/file-viewer前面配置统一前缀路径即可
+        origin: location.origin + '/你的前缀路径（没有可去除）/file-viewer/index.html',
         // 目标frame
         frame: null,
         // 浏览的文件url
@@ -221,7 +250,12 @@ export default {
       context: {
         // 查看器的地址
         // 自己项目内部署需要将编译后的产物file-viewer放在public文件夹中使用,编译后的产物需要下载，下载链接在文档上
-        origin: location.origin + '/file-viewer/index.html',
+        // 若为node环境，且发布生产的项目不在服务器域名根目录，这将导致生产和开发环境的引用路径不一致（由于动态赋值的路径只会被编译器原样解析，需要特别注意通过配置打包的前缀路径也不会对此次生效，例如vue-cli的publicPath），可通过process.env.NODE_ENV进行手动判断
+        origin:
+          location.origin +
+          (process.env.NODE_ENV === 'production'
+            ? '/file-viewer-doc/file-viewer/index.html'
+            : '/file-viewer/index.html'),
         // 目标frame
         frame: null,
         // 浏览的文件url
@@ -231,6 +265,7 @@ export default {
   },
   mounted() {
     this.loadFromUrl()
+    console.log('process.env.NODE_ENV', process.env.NODE_ENV)
   },
   methods: {
     // 获取文件二进制流

doc/views/Start.vue

@@ -1 +1 @@
-<!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"><link rel="icon" href="/file-viewer/favicon.ico"><title>@zuiyouliao/vue-file-viewer</title><link href="/file-viewer/static/css/chunk-vendors.14348074.css" rel="preload" as="style"><link href="/file-viewer/static/css/index.56a4c341.css" rel="preload" as="style"><link href="/file-viewer/static/js/chunk-vendors.9c26e4cb.js" rel="preload" as="script"><link href="/file-viewer/static/js/index.d6d27d52.js" rel="preload" as="script"><link href="/file-viewer/static/css/chunk-vendors.14348074.css" rel="stylesheet"><link href="/file-viewer/static/css/index.56a4c341.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @zuiyouliao/vue-file-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/file-viewer/static/js/chunk-vendors.9c26e4cb.js"></script><script src="/file-viewer/static/js/index.d6d27d52.js"></script></body></html>
+<!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"><link rel="icon" href="favicon.ico"><title>@zuiyouliao/vue-file-viewer</title><link href="static/css/chunk-vendors.14348074.css" rel="preload" as="style"><link href="static/css/index.56a4c341.css" rel="preload" as="style"><link href="static/js/chunk-vendors.101c5e96.js" rel="preload" as="script"><link href="static/js/index.24e10c2b.js" rel="preload" as="script"><link href="static/css/chunk-vendors.14348074.css" rel="stylesheet"><link href="static/css/index.56a4c341.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @zuiyouliao/vue-file-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.101c5e96.js"></script><script src="static/js/index.24e10c2b.js"></script></body></html>