You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1 lines
16 KiB

(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("维护的"),t("code",[s._v("Docker")]),s._v("镜像。")])]),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}}]);