(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d20f137"],{b1a3:function(t,s,a){"use strict";a.r(s);var e=function(){var t=this;t._self._c;return t._m(0)},n=[function(){var t=this,s=t._self._c;return s("div",[s("h1",[t._v("Deploy")]),s("p",[t._v("The 'web' directory of this project provides a complete project developed based on the 'simple mind map' library, 'Vue2. x', and 'ElementUI'. The data is stored locally on the computer by default, and can also be manipulated locally on the computer. Originally intended as an online 'demo', it can also be directly used as an online version of the mind map application, online address: "),s("a",{attrs:{href:"https://wanglin2.github.io/mind-map/"}},[t._v("https://wanglin2.github.io/mind-map/")]),t._v(".")]),s("p",[t._v("If your network environment is slow to access the 'GitHub' service, you can also deploy it to your server.")]),s("h2",[t._v("Deploying to a static file server")]),s("p",[t._v("The project itself does not rely on the backend, so it can be deployed to a static file server. The following commands can be executed in sequence:")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("git "),s("span",{staticClass:"hljs-built_in"},[t._v("clone")]),t._v(" https://github.com/wanglin2/mind-map.git\n"),s("span",{staticClass:"hljs-built_in"},[t._v("cd")]),t._v(" mind-map\n"),s("span",{staticClass:"hljs-built_in"},[t._v("cd")]),t._v(" simple-mind-map\nnpm i\nnpm link\n"),s("span",{staticClass:"hljs-built_in"},[t._v("cd")]),t._v(" ..\n"),s("span",{staticClass:"hljs-built_in"},[t._v("cd")]),t._v(" web\nnpm i\nnpm link simple-mind-map\n")])]),s("p",[t._v("Then you can choose to start the local service:")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("npm run serve\n")])]),s("p",[t._v("You can also directly package and generate construction products:")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("npm run build\n")])]),s("p",[t._v("The packaged entry page 'index.html' can be found in the project root directory, and the corresponding static resources are located in the 'dist' directory under the root directory. The 'html' file will access the resources in the 'dist' directory through relative paths, such as 'dist/xxx'. You can directly upload these two files or directories to your static file server. In fact, this project is deployed to 'GitHub Pages' in this way.")]),s("p",[t._v("If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.")]),s("p",[t._v("If you want to package 'index.html' into the 'dist' directory as well, you can modify the 'scripts.build' command in the 'web/package.json' file to delete '&& node ../copy.js' from 'vue-cli-service build && node ../copy.js'.")]),s("p",[t._v("If you want to modify the directory for packaging output, you can modify the 'outputDir' configuration of the 'web/vue.config.js' file to the path you want to output.")]),s("p",[t._v("If you want to modify the path of the 'index. html' file referencing static resources, you can modify the 'publicPath' configuration of the 'web/vue.config.js' file. And the "),s("code",[t._v("window.externalPublicPath")]),t._v(" config in "),s("code",[t._v("web/public/index.html")]),t._v(" file.")]),s("p",[t._v("In addition, the default route used is 'hash ', which means that there will be '#'in the path. If you want to use the 'history' route, you can modify the 'web/src/router.js' file to:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" router = "),s("span",{staticClass:"hljs-keyword"},[t._v("new")]),t._v(" VueRouter({\n routes\n})\n")])]),s("p",[t._v("Change to:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" router = "),s("span",{staticClass:"hljs-keyword"},[t._v("new")]),t._v(" VueRouter({\n "),s("span",{staticClass:"hljs-attr"},[t._v("mode")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'history'")]),t._v(",\n routes\n})\n")])]),s("p",[t._v("However, this requires backend support, as our application is a single page client application. If the backend is not properly configured, users will return 404 when accessing sub routes directly in the browser. Therefore, you need to add a candidate resource on the server that covers all situations: if the 'URL' cannot match any static resources, the same 'index. html' page should be returned.")]),s("h2",[t._v("Docker")]),s("blockquote",[s("p",[t._v("Thank you very much "),s("a",{attrs:{href:"https://github.com/shuiche-it"}},[t._v("水车")]),t._v(", the corresponding Docker package is maintained by him.")])]),s("p",[t._v("Install directly from Docker Hub:")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("docker run -d -p 8081:8080 shuiche/mind-map:latest\n")])]),s("p",[t._v("Mindmap has activated port 8080 as the web service entry point in the container. When running the container through Docker, it is necessary to specify a local mapping port. In the above case, we mapped the local port 8081 to the container port 8080.")]),s("p",[t._v("After the installation is completed, check the container's running status through 'Docker PS'.")]),s("p",[t._v("Open 127.0.0.1:8081 in the browser to use the Web mind map function.")]),s("p",[s("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/"}},[t._v("在群晖上以 Docker 方式安装")])]),s("h2",[t._v("Docking with one's own storage services")]),s("p",[t._v("The application data is stored locally in the browser by default, and the local storage capacity of the browser is relatively small, so it is easy to trigger restrictions when inserting more images in the mind map. Therefore, a better choice is to dock with your own storage service, which usually has two ways:")]),s("h3",[t._v("The first")]),s("p",[t._v("Simply clone the warehouse code and modify the relevant methods in 'web/src/API/index.js' to obtain data from your database and store it in your data.")]),s("h3",[t._v("The second")]),s("p",[t._v("Many times, you may want to always use the latest code from this repository, so the first method is not very convenient because you need to manually merge the code, so the second method is provided.")]),s("p",[t._v("Specific operating steps:")]),s("ol",[s("li",[t._v("Copy the packaged resources of the web application")])]),s("p",[t._v("This includes the 'dist' directory and the 'index.html' file.")]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("Modify the copied 'index.html' file")])]),s("p",[t._v("Firstly, insert the following code into the 'head' tag:")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("