coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-24 11:57:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
660ec00ca7
mind-map/dist/js/chunk-2d0d6590.js
街角小林 06c4809b7b update
2023-12-07 09:45:22 +08:00

1 line
16 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0d6590"],{"71bb":function(s,t,a){"use strict";a.r(t);var n=function(){var s=this;s._self._c;return s._m(0)},_=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("部署")]),t("p",[s._v("本项目的"),t("code",[s._v("web")]),s._v("目录下提供了一个基于"),t("code",[s._v("simple-mind-map")]),s._v("库、"),t("code",[s._v("Vue2.x")]),s._v("、"),t("code",[s._v("ElementUI")]),s._v("开发的完整项目，数据默认存储在电脑本地，此外可以操作电脑本地文件，原意是作为一个线上"),t("code",[s._v("demo")]),s._v("，但是也完全可以直接把它当做一个在线版思维导图应用使用，在线地址："),t("a",{attrs:{href:"https://wanglin2.github.io/mind-map/"}},[s._v("https://wanglin2.github.io/mind-map/")]),s._v("。")]),t("p",[s._v("如果你的网络环境访问"),t("code",[s._v("GitHub")]),s._v("服务很慢，你也可以部署到你的服务器上。")]),t("h2",[s._v("部署到静态文件服务器")]),t("p",[s._v("项目本身不依赖后端，所以完全可以部署到一个静态文件服务器上，可以依次执行如下命令：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("git "),t("span",{staticClass:"hljs-built_in"},[s._v("clone")]),s._v(" https://github.com/wanglin2/mind-map.git\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" mind-map\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm i\nnpm link\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" ..\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm i\nnpm link simple-mind-map\n")])]),t("p",[s._v("然后你可以选择启动本地服务：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("npm run serve\n")])]),t("p",[s._v("也可以直接打包生成构建产物：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("npm run build\n")])]),t("p",[s._v("打包完后的入口页面"),t("code",[s._v("index.html")]),s._v("可以在项目根目录找到，对应的静态资源在根目录下的"),t("code",[s._v("dist")]),s._v("目录，"),t("code",[s._v("html")]),s._v("文件中会通过相对路径访问"),t("code",[s._v("dist")]),s._v("目录的资源，比如"),t("code",[s._v("dist/xxx")]),s._v("。你可以直接把这两个文件或目录上传到你的静态文件服务器，事实上，本项目就是这样部署到"),t("code",[s._v("GitHub Pages")]),s._v("上的。")]),t("p",[s._v("如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。")]),t("p",[s._v("如果你想把"),t("code",[s._v("index.html")]),s._v("也打包进"),t("code",[s._v("dist")]),s._v("目录，可以修改"),t("code",[s._v("web/package.json")]),s._v("文件的"),t("code",[s._v("scripts.build")]),s._v("命令，把"),t("code",[s._v("vue-cli-service build && node ../copy.js")]),s._v("中的"),t("code",[s._v(" && node ../copy.js")]),s._v("删除即可。")]),t("p",[s._v("如果你想修改打包输出的目录，可以修改"),t("code",[s._v("web/vue.config.js")]),s._v("文件的"),t("code",[s._v("outputDir")]),s._v("配置，改成你想要输出的路径即可。")]),t("p",[s._v("如果你想修改"),t("code",[s._v("index.html")]),s._v("文件引用静态资源的路径的话可以修改"),t("code",[s._v("web/vue.config.js")]),s._v("文件的"),t("code",[s._v("publicPath")]),s._v("配置。以及"),t("code",[s._v("web/public/index.html")]),s._v("文件的"),t("code",[s._v("window.externalPublicPath")]),s._v("配置。")]),t("p",[s._v("另外默认使用的是"),t("code",[s._v("hash")]),s._v("路由，也就是路径中会在"),t("code",[s._v("#")]),s._v("，如果你想使用"),t("code",[s._v("history")]),s._v("路由，可以修改"),t("code",[s._v("web/src/router.js")]),s._v("文件，将：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" router = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueRouter({\n routes\n})\n")])]),t("p",[s._v("改成：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" router = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueRouter({\n "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'history'")]),s._v(",\n routes\n})\n")])]),t("p",[s._v("不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果"),t("code",[s._v("URL")]),s._v("匹配不到任何静态资源，则应该返回同一个"),t("code",[s._v("index.html")]),s._v("页面。")]),t("h2",[s._v("Docker")]),t("blockquote",[t("p",[s._v("非常感谢"),t("a",{attrs:{href:"https://github.com/shuiche-it"}},[s._v("水车")]),s._v("，本小节由他编写，对应的 Docker 包也由他维护。")])]),t("p",[s._v("直接从 Docker hup 中安装：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("docker run -d -p 8081:8080 shuiche/mind-map:latest\n")])]),t("p",[s._v("mind-map在容器中启动了8080端口作为web服务入口，通过docker运行容器时，需要指定本地映射端口，上面案例中，我们通过本地的8081端口映射到容器端口8080。")]),t("p",[s._v("安装完成后，通过 "),t("code",[s._v("docker ps")]),s._v(" 查看容器运行状态。")]),t("p",[s._v("浏览器打开 127.0.0.1:8081 即可使用Web 思维导图功能。")]),t("p",[t("a",{attrs:{href:"https://laosu.gq/2023/09/02/%E5%BC%BA%E5%A4%A7%E7%9A%84%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE%E5%BA%93SimpleMindMap/"}},[s._v("在群晖上以 Docker 方式安装")])]),t("h2",[s._v("对接自己的存储服务")]),t("p",[s._v("应用数据默认存储在浏览器本地，浏览器本地存储容量是比较小的，所以当在思维导图中插入更多图片后很容易触发限制，所以更好的选择是对接你自己的存储服务，这通常有两种方式：")]),t("h3",[s._v("第一种")]),t("p",[s._v("直接clone本仓库代码，然后修改"),t("code",[s._v("web/src/api/index.js")]),s._v("内的相关方法即可实现从你的数据库里获取数据，以及存储到你的数据中。")]),t("h3",[s._v("第二种")]),t("p",[s._v("很多时候，你可能想始终使用本仓库的最新代码，那么第一种方式就不太方便，因为你要手动去合并代码，所以提供了第二种方式。")]),t("p",[s._v("具体操作步骤：")]),t("p",[s._v("1.复制web应用打包后的资源")]),t("p",[s._v("包括："),t("code",[s._v("dist")]),s._v("目录和"),t("code",[s._v("index.html")]),s._v("文件。")]),t("p",[s._v("2.修改复制后的"),t("code",[s._v("index.html")]),s._v("文件")]),t("p",[s._v("首先在"),t("code",[s._v("head")]),s._v("标签里插入如下代码：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("<script>\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverApp = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n<\/script>\n")])]),t("p",[s._v("这行代码会提示应用不要初始化应用"),t("code",[s._v("即：new Vue()")]),s._v("，而是把控制权交给你，接下来再在"),t("code",[s._v("body")]),s._v("的最后插入你自己的"),t("code",[s._v("js")]),s._v("代码，内联或则外链都可以，内联示例如下：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("<script>\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 你自己的请求数据的方法")]),s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" getDataFromBackend = "),t("span",{staticClass:"hljs-function"},[s._v("() =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Promise")]),s._v("("),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("resolve, reject")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("setTimeout")]),s._v("("),t("span",{staticClass:"hljs-function"},[s._v("() =>")]),s._v(" {\n resolve({\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 思维导图数据")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("mindMapData")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("root")]),s._v(": {\n "),t("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(": {\n "),t("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"根节点"')]),s._v("\n },\n "),t("span",{staticClass:"hljs-string"},[s._v('"children"')]),s._v(": []\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": { "),t("span",{staticClass:"hljs-string"},[s._v('"template"')]),s._v(":"),t("span",{staticClass:"hljs-string"},[s._v('"avocado"')]),s._v(","),t("span",{staticClass:"hljs-string"},[s._v('"config"')]),s._v(":{} },\n "),t("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"logicalStructure"')]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("config")]),s._v(": {},\n "),t("span",{staticClass:"hljs-attr"},[s._v("view")]),s._v(": {}\n },\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 页面语言，支持中文（zh）、英文（en）")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("lang")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'zh'")]),s._v(",\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 页面部分配置")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("localConfig")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n })\n }, "),t("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(")\n })\n }\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 注册全局方法")]),s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" setTakeOverAppMethods = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("data")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods = {}\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 获取思维导图数据的函数")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods.getMindMapData = "),t("span",{staticClass:"hljs-function"},[s._v("() =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.mindMapData\n } \n "),t("span",{staticClass:"hljs-comment"},[s._v("// 保存思维导图数据的函数")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods.saveMindMapData = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("data")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data)\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 该函数触发频率可能会很高，所以你应该做一下节流或防抖")]),s._v("\n }\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 获取语言的函数")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods.getLanguage = "),t("span",{staticClass:"hljs-function"},[s._v("() =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.lang\n }\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 保存语言的函数")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods.saveLanguage = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("lang")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(lang)\n }\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 获取本地配置的函数")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods.getLocalConfig = "),t("span",{staticClass:"hljs-function"},[s._v("() =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.localConfig\n }\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 保存本地配置的函数")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverAppMethods.saveLocalConfig = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("config")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(config)\n }\n }\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".onload = "),t("span",{staticClass:"hljs-keyword"},[s._v("async")]),s._v(" () => {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".takeOverApp) "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v("\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 请求数据")]),s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = "),t("span",{staticClass:"hljs-keyword"},[s._v("await")]),s._v(" getDataFromBackend()\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 设置全局的方法")]),s._v("\n setTakeOverAppMethods(data)\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 思维导图实例创建完成事件")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".$bus.$on("),t("span",{staticClass:"hljs-string"},[s._v("'app_inited'")]),s._v(", "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("mindMap")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(mindMap)\n })\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 可以通过window.$bus.$on()来监听应用的一些事件")]),s._v("\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 实例化页面")]),s._v("\n "),t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".initApp()\n }\n<\/script>\n")])]),t("p",[s._v("如上所示，当你设置了"),t("code",[s._v("window.takeOverApp = true")]),s._v("标志，应用不再主动进行实例化，而是会将实例化的方法暴露出来由你调用，那么你可以先从后端请求思维导图的数据，然后再注册相关的方法，应用内部会在合适的时机进行调用，从而达到回显和保存的目的。")]),t("p",[s._v("这样做的好处是，每当本仓库代码更新了，你可以简单的复制打包后的文件到你自己的服务器，只要稍微修改一下"),t("code",[s._v("index.html")]),s._v("页面即可达到同步更新且使用自己的存储服务的目的。")]),t("h2",[s._v("修改静态资源路径")]),t("p",[s._v("如果你想和上一节一样保持和本仓库代码的同步更新，但是又想修改静态资源的存放位置，比如默认的层级关系为：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("-dist\n--css\n--fonts\n--img\n--js\n-logo.ico\n\n-index.html\n")])]),t("p",[s._v("而你想调整成这样：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("-assets\n--dist\n---css\n---fonts\n---img\n---js\n-logo.ico\n\n-index.html\n")])]),t("p",[s._v("那么你可以将"),t("code",[s._v("index.html")]),s._v("中的"),t("code",[s._v("window.externalPublicPath")]),s._v("配置由默认的"),t("code",[s._v("./dist/")]),s._v("修改为：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-built_in"},[s._v("window")]),s._v(".externalPublicPath = "),t("span",{staticClass:"hljs-string"},[s._v("'./assets/dist/'")]),s._v("\n")])]),t("p",[s._v("同时"),t("code",[s._v("index.html")]),s._v("中内联的"),t("code",[s._v(".ico")]),s._v("、"),t("code",[s._v(".js")]),s._v("、"),t("code",[s._v(".css")]),s._v("资源的路径需要你手动修改。")]),t("p",[s._v("需要注意的是，"),t("code",[s._v("dist")]),s._v("目录内的目录层级关系最好不要调整，否则可能会出现异常。")]),t("p",[s._v("如果你想替换其中的一些静态资源，比如你想将主题图片和结构的图片替换成你自己设计的图片，那么可以直接同名覆盖。")])])}],v={},l=v,i=a("2877"),e=Object(i["a"])(l,n,_,!1,null,null,null);t["default"]=e.exports}}]);
Reference in New Issue View Git Blame Copy Permalink