调整为vue-router模式

dependencies-cdn.js

@@ -1,5 +1,6 @@
 module.exports = [
   { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
+  { name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' },
   { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
   // { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },
   // { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },

package-lock.json

@@ -11823,6 +11823,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588196200689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
+      "integrity": "sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
+    "vue-router": "^3.1.6",
     "vue2-ace-editor": "0.0.15"
   },
   "devDependencies": {

src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Layout from "./view/Layout";
+import Layout from "./views/Layout";
 
 export default {
   name: "App",
@@ -34,7 +34,7 @@ export default {
     this.config.path = path;
     this.config.siteName = document.getElementsByTagName("title")[0].innerText;
     this.config.title = this.siteName + "-" + decodeURI(path);
-    this.$refs.layout.render(this.config);
+    // this.$refs.layout.render(this.config);
   }
 };
 </script>

src/assets/style/theme/acrou/index.scss

@@ -10,10 +10,10 @@ body {
 	max-width: 980px;
 }
 
-.icon {
+.iconfont {
 	width: 2em;
 	height: 2em;
-	vertical-align: middle;
+	vertical-align: -0.5em;
 	fill: currentColor;
 	overflow: hidden;
 }
@@ -45,13 +45,43 @@ body {
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		vertical-align: middle;
+		&:hover,& .icon{
+			cursor: pointer;
+		}
 	}
 }
 
+.footer {
+	background-color: transparent;
+}
+
 .no-content {
 	background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
 	height: 240px;
 	line-height: 240px;
 	text-align: center;
 	margin-top: 20px;
+}
+
+.golist {
+	min-height: 240px;
+	position: relative;
+
+	.pageloader:not(.is-bottom-to-top) {
+		-webkit-transform: initial;
+		transform: initial;
+	}
+	.pageloader{
+		position: absolute;
+		padding-top: 0;
+		background: hsla(0,0%,100%,.6);
+		will-change: initial;
+	
+		.title {
+			color: hsl(0, 0%, 4%);
+		}
+	}
+	.pageloader::after {
+		border: 0 solid black;
+	}
 }

src/libs/util.import.development.js

@@ -0,0 +1 @@
+module.exports = file => require('@/views/' + file).default

src/libs/util.import.production.js

@@ -0,0 +1 @@
+module.exports = file => () => import('@/views/' + file)

src/main.js

@@ -2,11 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import axios from '@utils/axios'
 import VueAxios from 'vue-axios'
+import router from './router'
 
 var styles = [
   // 'https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css',
   // 'https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css',
   'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css',
+  'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css',
+  'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css',
+  'https://cdn.jsdelivr.net/npm/bulma-pageloader@0.3.0/dist/css/bulma-pageloader.min.css'
 ]
 styles.forEach(item=>{
   document.write(`<link rel="stylesheet" href="${item}">`);
@@ -18,5 +22,6 @@ Vue.config.productionTip = false
 Vue.use(VueAxios,axios)
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+// 路由数据
+import routes from './routes'
+
+// fix vue-router NavigationDuplicated
+const VueRouterPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push (location) {
+  return VueRouterPush.call(this, location).catch(err => err)
+}
+const VueRouterReplace = VueRouter.prototype.replace
+VueRouter.prototype.replace = function replace (location) {
+  return VueRouterReplace.call(this, location).catch(err => err)
+}
+
+Vue.use(VueRouter)
+
+// 导出路由 在 main.js 里使用
+const router = new VueRouter({
+  mode: 'history',
+  /* scrollBehavior(to,from,savePosition){
+    if(savePosition) {
+      return savePosition;
+    }else{
+      return {x:0,y:0}
+    }
+  }, */
+  routes
+})
+
+/**
+ * 路由拦截
+ * 权限验证
+ */
+router.beforeEach(async (to, from, next) => {
+  console.log(to)
+  next()
+})
+
+router.afterEach(to => {
+  console.log(to)
+})
+
+export default router

src/router/routes.js

@@ -0,0 +1,11 @@
+// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
+const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
+
+const frameIn = [
+  { path: '/:id:/*.(html|php|css|go|java|py|js|json|txt|sh|md)', component: _import('page/GoText') },
+  { path: '/:id:/*.(mp4|webm|mkv)\\?a=view', component: _import('page/GoVideo') },
+  { path: '/:id:/*.(bmp|jpg|jpeg|png|gif)\\?a=view', component: _import('page/GoImg') },
+  { path: '/:id::cmd?(/??.*)', component: _import('page/GoList') },
+]
+
+export default frameIn

src/view/Layout.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <Navbar ref="navbar"></Navbar>
-    <section class="section">
-      <div class="container">
-        <go-headmd :option="headmd" v-show="headmd.display"></go-headmd>
-        <bread-crumb ref="breadcrumb"></bread-crumb>
-        <go-list
-          ref="list"
-          v-on:headmd="setHeadmd"
-          v-on:readmemd="setReadmemd"
-          v-show="show=='list'"
-        ></go-list>
-        <hr />
-        <go-readmemd :option="readmemd" v-show="readmemd.display"></go-readmemd>
-        <go-video ref="govideo" v-show="show=='video'"></go-video>
-        <go-text :option="text" v-show="show=='text'"></go-text>
-        <go-img ref="goimg" v-show="show=='img'"></go-img>
-        <Footer></Footer>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import Navbar from "./common/Navbar"
-import BreadCrumb from "./common/BreadCrumb"
-import GoVideo from "./page/GoVideo"
-import Markdown from "./common/Markdown"
-import GoList from "./page/GoList"
-import GoText from "./page/GoText"
-import GoImg from "./page/GoImg"
-import Footer from "./common/Footer"
-import { getQueryString } from "@utils/AcrouUtil"
-export default {
-  data: function () {
-    return {
-      path: "",
-      show: "list",
-      text: { file: {}, path: "" },
-      headmd: { display: false, file: {}, path: "" },
-      readmemd: { display: false, file: {}, path: "" },
-    };
-  },
-  components: {
-    Navbar: Navbar,
-    BreadCrumb: BreadCrumb,
-    GoHeadmd: Markdown,
-    GoReadmemd: Markdown,
-    GoList: GoList,
-    GoVideo: GoVideo,
-    GoText: GoText,
-    GoImg: GoImg,
-    Footer: Footer,
-  },
-  methods: {
-    render (config) {
-      let path = config.path;
-      this.$refs.navbar.siteName = config.siteName;
-      this.$refs.breadcrumb.render(path);
-      var param = window.location.search;
-      var reg = /\/\d+:$/g;
-      if (path.match(reg) || param.indexOf("?a=view") < 0) {
-        this.show = "list";
-        this.$refs.list.render(path, getQueryString(param, "q"));
-      } else {
-        var name = path.split("/").pop();
-        var ext = name.split(".").pop().toLowerCase();
-        if (
-          "|html|php|css|go|java|py|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0
-        ) {
-          this.show = "text";
-          this.text = {
-            path: path,
-            file: {},
-          };
-        }
-
-        if ("|mp4|webm|mkv|".indexOf(`|${ext}|`) >= 0) {
-          this.show = "video";
-          this.$refs.govideo.render(path);
-        }
-
-        if ("|bmp|jpg|jpeg|png|gif|".indexOf(`|${ext}|`) >= 0) {
-          this.show = "img";
-          this.$refs.goimg.render(path);
-        }
-      }
-    },
-    setHeadmd (val) {
-      this.headmd = val;
-    },
-    setReadmemd (val) {
-      this.readmemd = val;
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import "~@/assets/style/theme/register.scss";
-</style>

src/view/page/GoText.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="content">
-    <editor
-      ref="myEditor"
-      v-model="content"
-      @init="editorInit"
-      lang="html"
-      theme="chrome"
-      width="100%"
-      height="600"
-    ></editor>
-  </div>
-</template>
-
-<script>
-import { get_file } from "@utils/AcrouUtil"
-export default {
-  props: {
-    option: {
-      path: "",
-      file: {},
-    },
-  },
-  watch: {
-    option () {
-      this.content = "加载中...";
-      get_file(this.option, (data) => {
-        this.content = data;
-      });
-    },
-  },
-  data: function () {
-    return {
-      content: "",
-    };
-  },
-  components: {
-    editor: import('@/components/ace-editor'),
-  },
-  methods: {
-    editorInit (editor) {
-      editor.setFontSize(18)
-      editor.session.setUseWrapMode(false);
-      import("brace/ext/language_tools"); //language extension prerequsite...
-      import("brace/mode/html");
-      import("brace/mode/javascript"); //language
-      import("brace/mode/less");
-      import("brace/theme/chrome");
-      import("brace/snippets/javascript"); //snippet
-    },
-  }
-}
-</script>

src/views/Layout.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Head></Head>
+    <section class="section">
+      <div class="container">
+        <bread-crumb ref="breadcrumb"></bread-crumb>
+        <!-- <keep-alive> -->
+          <router-view></router-view>
+        <!-- </keep-alive> -->
+        <Footer></Footer>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Head from "./common/Head"
+import BreadCrumb from "./common/BreadCrumb";
+import Footer from "./common/Footer"
+export default {
+  data: function () {
+    return {
+      path: "",
+      show: "list",
+      text: { file: {}, path: "" },
+      headmd: { display: false, file: {}, path: "" },
+      readmemd: { display: false, file: {}, path: "" },
+    };
+  },
+  components: {
+    Head,
+    BreadCrumb,
+    Footer: Footer,
+  },
+  methods: {
+    setHeadmd (val) {
+      this.headmd = val;
+    },
+    setReadmemd (val) {
+      this.readmemd = val;
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "~@/assets/style/theme/register.scss";
+</style>

src/views/common/BreadCrumb.vue

@@ -7,7 +7,7 @@
         v-bind:key="index"
       >
         <a v-if="(index+1)==navs.length" aria-current="page" href="#">{{item.title}}</a>
-        <a v-else :href="item.path">{{item.title}}</a>
+        <a v-else @click="go(item.path)">{{item.title}}</a>
       </li>
     </ul>
   </nav>
@@ -21,8 +21,22 @@ export default {
       index: "/"
     };
   },
+  mounted() {
+    this.render();
+  },
+  watch: {
+    $route(to, from) {
+      this.render();
+    }
+  },
   methods: {
-    render(path) {
+    go(path) {
+      this.$router.push({
+        path: path
+      });
+    },
+    render() {
+      let path = window.location.pathname;
       // 如果是搜索不进行渲染
       if (path.match("/[0-9]+:search")) {
         return;

src/views/common/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content has-text-centered is-fixed-bottom">
+  <footer class="footer">
     <div class="columns is-mobile is-centered">
       <div class="field is-grouped is-grouped-multiline">
         <div class="control">
@@ -16,23 +16,19 @@
         </div>
       </div>
     </div>
-  </div>
+  </footer>
 </template>
 
 <script>
 export default {
-  props: {
+  props: {},
-  },
+  watch: {},
-  watch: {
+  data: function() {
-  },
-  data: function () {
     return {
-      content: "",
+      content: ""
     };
   },
-  components: {
+  components: {},
-  },
+  methods: {}
-  methods: {
+};
-  }
-}
 </script>

src/views/common/Head.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <Navbar ref="navbar"></Navbar>
+  </div>
+</template>
+
+<script>
+import Navbar from "./Navbar";
+
+export default {
+  data: function() {
+    return {};
+  },
+  methods: {},
+  components: {
+    Navbar
+  }
+};
+</script>

src/views/common/Markdown.vue

@@ -3,38 +3,44 @@
 </template>
 
 <script>
-import { get_file } from "@utils/AcrouUtil"
+import { get_file } from "@utils/AcrouUtil";
-import MarkdownIt from 'markdown-it'
+import MarkdownIt from "markdown-it";
 export default {
   props: {
-    option: {},
+    option: {}
   },
   watch: {
-    option () {
+    option() {
-      this.render()
+      this.render();
-    },
+    }
   },
-  data: function () {
+  data: function() {
     return {
-      content: `
+      content: ''
+    };
+  },
+  computed: {
+    defaultContent() {
+      return `
         <center>
             <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
             <span class="sr-only">Loading...</span>
         </center>
-      `,
+      `
-    };
+    }
   },
   components: {},
   methods: {
-    render () {
+    render() {
-      const md = new MarkdownIt()
+      this.content = this.defaultContent
+      const md = new MarkdownIt();
       // if (window.md == undefined) {
       //   window.md = window.markdownit();
       // }
-      get_file(this.option, (data) => {
+      get_file(this.option, data => {
         this.content = md.render(data);
       });
-    },
+    }
   }
-}
+};
 </script>

src/views/common/Navbar.vue

@@ -86,6 +86,9 @@ export default {
       this.param = window.MODEL.q ? window.MODEL.q : "";
     }
   },
+  mounted() {
+    this.siteName = document.getElementsByTagName("title")[0].innerText;
+  },
   data: function() {
     return {
       siteName: "",
@@ -103,8 +106,11 @@ export default {
     },
     query() {
       if (this.param) {
-        location.href =
+        this.$router.push({
-          this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param;
+          path: this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param
+        });
+        // location.href =
+        //   this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param;
       }
     },
     burgerClick() {

src/views/page/GoImg.vue

@@ -18,13 +18,19 @@ export default {
       display: false
     };
   },
+  mounted() {
+    let path = window.location.pathname;
+    // 便于开发环境调试
+    path = process.env.NODE_ENV === "development" ? "/api" + path : "";
+    this.imgurl = path;
+  },
   methods: {
-    render(path) {
+    // render(path) {
-      this.imgurl = path;
+    //   this.imgurl = path;
-    },
+    // },
     loading(event) {
       if (event.target.complete == true) {
-        this.display = true
+        this.display = true;
       }
     }
   }

src/views/page/GoList.vue

@@ -1,52 +1,62 @@
 <template>
   <div>
-    <progress
+    <headmd :option="headmd" v-show="headmd.display"></headmd>
-      v-if="loading"
+    <div class="golist">
-      class="progress is-small is-primary"
+      <table class="table is-hoverable">
-      style="height: .25rem;"
+        <thead>
-      max="100"
+          <tr>
-    >15%</progress>
+            <th
-    <table class="table is-hoverable">
+              v-for="(column,index) in columns"
-      <thead>
+              v-bind:key="index"
-        <tr>
+              :class="column.class"
-          <th
+              :style="column.style"
-            v-for="(column,index) in columns"
+            >{{column.name}}</th>
-            v-bind:key="index"
+          </tr>
-            :class="column.class"
+        </thead>
-            :style="column.style"
+        <tbody>
-          >{{column.name}}</th>
+          <tr v-for="(file,index) in files" v-bind:key="index">
-        </tr>
+            <td @click="go(file)">
-      </thead>
+              <svg class="iconfont" aria-hidden="true">
-      <tbody>
+                <use :xlink:href="getIcon(file.mimeType)" />
-        <tr v-for="(file,index) in files" v-bind:key="index">
+              </svg>
-          <td @click="go(file.path)">
+              {{file.name}}
-            <svg class="icon" aria-hidden="true">
+            </td>
-              <use :xlink:href="getIcon(file.mimeType)" />
+            <td class="is-hidden-mobile is-hidden-touch">{{file.modifiedTime}}</td>
-            </svg>
+            <td class="is-hidden-mobile is-hidden-touch">{{file.size}}</td>
-            {{file.name}}
+            <td
-          </td>
+              class="is-hidden-mobile is-hidden-touch"
-          <td class="is-hidden-mobile is-hidden-touch">{{file.modifiedTime}}</td>
+              v-if="file.mimeType!=='application/vnd.google-apps.folder'"
-          <td class="is-hidden-mobile is-hidden-touch">{{file.size}}</td>
+            >
-          <td
+              <!-- <span class="icon" @click="copy(file.path)">
-            class="is-hidden-mobile is-hidden-touch"
+                <i class="fa fa-copy" title="copy link" aria-hidden="true"></i>
-            v-if="file.mimeType!=='application/vnd.google-apps.folder'"
+              </span>-->
-          >
+              <span class="icon" @click.stop="go(file,'_blank')">
-            <!-- <span class="icon" @click="copy(file.path)">
+                <i class="fa fa-external-link" title="Open a new tab" aria-hidden="true"></i>
-              <i class="fa fa-copy" title="copy link" aria-hidden="true"></i>
+              </span>
-            </span> -->
+              <span class="icon">
-            <span class="icon">
+                <i
-              <i class="fa fa-download" title="Download" @click="go(file.path,'down')"></i>
+                  class="fa fa-download faa-shake animated-hover"
-            </span>
+                  title="Download"
-          </td>
+                  @click="go(file,'down')"
-        </tr>
+                ></i>
-      </tbody>
+              </span>
-    </table>
+            </td>
-    <div v-show="files.length==0" class="has-text-centered no-content"></div>
+          </tr>
+        </tbody>
+      </table>
+      <div v-show="files.length==0" class="has-text-centered no-content"></div>
+      <div v-show="loading" class="pageloader is-active">
+        <span class="title">Loading...</span>
+      </div>
+    </div>
+    <hr />
+    <readmemd :option="readmemd" v-show="readmemd.display"></readmemd>
   </div>
 </template>
 
 <script>
 import { utc2beijing, formatFileSize } from "@utils/AcrouUtil";
+import Markdown from "../common/Markdown";
 export default {
   data: function() {
     return {
@@ -55,7 +65,7 @@ export default {
         page_index: 0
       },
       files: [],
-      loading: false,
+      loading: true,
       columns: [
         { name: "文件", style: "" },
         {
@@ -70,7 +80,7 @@ export default {
         },
         {
           name: "下载",
-          style: "width:6%",
+          style: "width:10%",
           class: "is-hidden-mobile is-hidden-touch"
         }
       ],
@@ -93,19 +103,32 @@ export default {
         "application/pdf": "icon-pdf",
         "application/json": "icon-JSON1",
         "application/x-yaml": "icon-YML",
-        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "icon-word",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+          "icon-word",
         "image/bmp": "icon-img",
         "image/jpeg": "icon-img",
         "image/png": "icon-img"
-      }
+      },
+      headmd: { display: false, file: {}, path: "" },
+      readmemd: { display: false, file: {}, path: "" }
     };
   },
+  components: {
+    Headmd: Markdown,
+    Readmemd: Markdown
+  },
+  mounted() {
+    this.render();
+  },
   methods: {
-    render(path, param) {
+    render() {
+      let path = window.location.pathname;
       this.loading = true;
       var password = localStorage.getItem("password" + path);
+      // var param = window.location.search;
+      let q = this.$route.query.q;
       var p = {
-        q: param,
+        q: q ? decodeURIComponent(q) : "",
         password: password || null,
         ...this.page
       };
@@ -151,19 +174,19 @@ export default {
                 var p = path + item.name;
                 // HEAD.md
                 if (item.name === "HEAD.md") {
-                  this.$emit("headmd", {
+                  this.headmd = {
                     display: true,
                     file: item,
                     path: p
-                  });
+                  };
                 }
                 // REDEME.md
                 if (item.name === "README.md") {
-                  this.$emit("readmemd", {
+                  this.readmemd = {
                     display: true,
                     file: item,
                     path: p
-                  });
+                  };
                 }
 
                 var ext = p.split(".").pop();
@@ -204,15 +227,38 @@ export default {
     //   path = path.replace("?a=view", "");
     //   // TODO
     // },
-    go(path, type = "view") {
+    go(file, target) {
-      if (type === "down") {
+      let path = file.path;
-        path = path.replace("?a=view", "");
+      let cmd = this.$route.params.cmd || "";
+      if (cmd === "search") {
+        this.$refs.goSearchResult.go(file, target);
+        return;
+      }
+      if (target === "down") {
+        path = path.replace("?a=view", "");
+        window.open(path)
+        return;
+      }
+      if(target === '_blank'){
+        window.open(path)
+      }else{
+        this.$router.push({
+          path: path
+        });
       }
-      location.href = path;
     },
     getIcon(type) {
       return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
     }
+  },
+  watch: {
+    $route(to, from) {
+      // 后退设置page_token为空
+      if (to.path.length < from.path.length) {
+        this.page.page_token = null;
+      }
+      this.render();
+    }
   }
 };
-</script>
+</script>

src/views/page/GoRouter.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="card">324567</div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+        }
+  }
+}
+</script>

src/views/page/GoText.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="content">
+    <editor
+      ref="myEditor"
+      v-model="content"
+      @init="editorInit"
+      lang="html"
+      theme="chrome"
+      width="100%"
+      height="600"
+    ></editor>
+  </div>
+</template>
+
+<script>
+import { get_file } from "@utils/AcrouUtil"
+export default {
+  // props: {
+  //   option: {
+  //     path: "",
+  //     file: {},
+  //   },
+  // },
+  // watch: {
+  //   option () {
+  //     this.content = "加载中...";
+  //     get_file(this.option, (data) => {
+  //       this.content = data;
+  //     });
+  //   },
+  // },
+  data: function () {
+    return {
+      path: "",
+      content: ""
+    };
+  },
+  // watch: {
+  //   '$route' (to, from) {
+  //     this.content = "加载中...";
+  //     get_file({path: to.replace('?a=view','/'),file: {}}, (data) => {
+  //       this.content = data;
+  //     });
+  //   }
+  // },
+  created() {
+    this.render()
+  },
+  components: {
+    editor: require('@/components/ace-editor'),
+  },
+  methods: {
+    render() {
+      let path = window.location.pathname
+      this.content = "加载中...";
+      get_file({path: path.replace('?a=view','/'),file: {}}, (data) => {
+        this.content = data;
+      });
+    },
+    editorInit (editor) {
+      editor.setFontSize(18)
+      editor.session.setUseWrapMode(false);
+      require("brace/ext/language_tools"); //language extension prerequsite...
+      require("brace/mode/html");
+      require("brace/mode/javascript"); //language
+      require("brace/mode/less");
+      require("brace/theme/chrome");
+      require("brace/snippets/javascript"); //snippet
+    },
+  }
+}
+</script>

src/views/page/GoVideo.vue

@@ -76,11 +76,16 @@ export default {
     };
   },
   methods: {
-    render (path) {
+    // render (path) {
-      this.videourl = window.location.origin + path;
+    //   this.videourl = window.location.origin + path;
-      this.apiurl =
+    //   this.apiurl =
-        "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
+    //     "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
-    },
+    // },
+  },
+  mounted() {
+    // 便于开发环境调试
+    this.videourl = window.location.origin + window.location.pathname;
+    this.apiurl = "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
   },
   computed: {
     getThunder () {

vue.config.js

@@ -1,5 +1,4 @@
 const path = require("path");
-const fs = require('fs')
 const cdnDependencies = require('./dependencies-cdn')
 
 function resolve(dir) {
@@ -25,136 +24,6 @@ module.exports = {
     const configNew = {}
     if (process.env.NODE_ENV === 'production') {
       configNew.externals = externals
-      config.plugins.push({
-        apply: (compiler) => {
-          compiler.hooks.done.tap('JSWebpackPluginHooks', compilation => {
-            // console.log(compilation.assetsInfo)
-            const chunkOnlyConfig = {
-              assets: false,
-              cached: false,
-              children: false,
-              chunks: true,
-              chunkModules: false,
-              chunkOrigins: false,
-              errorDetails: false,
-              hash: false,
-              modules: false,
-              reasons: false,
-              source: false,
-              timings: false,
-              version: false
-            };
-            const allChunks = compilation.toJson(chunkOnlyConfig).chunks;
-            // console.log(JSON.stringify(allChunks))
-            let chunks = filterChunks(allChunks, 'all', []);
-            const assets = htmlWebpackPluginAssets(compilation, chunks);
-            function filterChunks (chunks, includedChunks, excludedChunks) {
-              return chunks.filter(chunk => {
-                const chunkName = chunk.names[0];
-                // This chunk doesn't have a name. This script can't handled it.
-                if (chunkName === undefined) {
-                  return false;
-                }
-                // Skip if the chunk should be lazy loaded
-                if (typeof chunk.isInitial === 'function') {
-                  if (!chunk.isInitial()) {
-                    return false;
-                  }
-                } else if (!chunk.initial) {
-                  return false;
-                }
-                // Skip if the chunks should be filtered and the given chunk was not added explicity
-                if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
-                  return false;
-                }
-                // Skip if the chunks should be filtered and the given chunk was excluded explicity
-                if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
-                  return false;
-                }
-                // Add otherwise
-                return true;
-              });
-            }
-            function htmlWebpackPluginAssets (compilation, chunks) {
-              const self = this;
-              const compilationHash = compilation.hash;
-          
-              // Use the configured public path or build a relative path
-              let publicPath = typeof compilation.options.output.publicPath !== 'undefined'
-                // If a hard coded public path exists use it
-                ? compilation.mainTemplate.getPublicPath({hash: compilationHash})
-                // If no public path was set get a relative url path
-                : path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path)
-                  .split(path.sep).join('/');
-          
-              if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
-                publicPath += '/';
-              }
-          
-              const assets = {
-                // The public path
-                publicPath: publicPath,
-                // Will contain all js & css files by chunk
-                chunks: {},
-                // Will contain all js files
-                js: [],
-                // Will contain all css files
-                css: [],
-                // Will contain the html5 appcache manifest files if it exists
-                manifest: Object.keys(compilation.assets).filter(assetFile => path.extname(assetFile) === '.appcache')[0]
-              };
-          
-              // Append a hash for cache busting
-              if (this.options.hash) {
-                assets.manifest = self.appendHash(assets.manifest, compilationHash);
-                assets.favicon = self.appendHash(assets.favicon, compilationHash);
-              }
-          
-              for (let i = 0; i < chunks.length; i++) {
-                const chunk = chunks[i];
-                const chunkName = chunk.names[0];
-          
-                assets.chunks[chunkName] = {};
-          
-                // Prepend the public path to all chunk files
-                let chunkFiles = [].concat(chunk.files).map(chunkFile => publicPath + chunkFile);
-          
-                // Append a hash for cache busting
-                if (this.options.hash) {
-                  chunkFiles = chunkFiles.map(chunkFile => self.appendHash(chunkFile, compilationHash));
-                }
-          
-                // Webpack outputs an array for each chunk when using sourcemaps
-                // or when one chunk hosts js and css simultaneously
-                const js = chunkFiles.find(chunkFile => /.js($|\?)/.test(chunkFile));
-                if (js) {
-                  assets.chunks[chunkName].size = chunk.size;
-                  assets.chunks[chunkName].entry = js;
-                  assets.chunks[chunkName].hash = chunk.hash;
-                  assets.js.push(js);
-                }
-          
-                // Gather all css files
-                const css = chunkFiles.filter(chunkFile => /.css($|\?)/.test(chunkFile));
-                assets.chunks[chunkName].css = css;
-                assets.css = assets.css.concat(css);
-              }
-          
-              // Duplicate css assets can occur on occasion if more than one chunk
-              // requires the same css.
-              assets.css = _.uniq(assets.css);
-          
-              return assets;
-            }
-            fs.writeFile(path.resolve('dist/app.js'),JSON.stringify(assets),function(err){
-              if(err){
-                return console.log(err)
-              }
-              console.log("Success")
-            })
-          });
-        }
-      })
     }
     return configNew
   },