If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.
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'.
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.
-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.
+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 window.externalPublicPath config in web/public/index.html file.
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:
const router = new VueRouter({
routes
@@ -143,8 +143,34 @@ npm link simple-mind-map
As shown above, when you set the 'window.takeOverApp=true' flag, the application will no longer actively instantiate, but will expose the instantiated methods for you to call. You can first request the data of the mind map from the backend, and then register the relevant methods. The application will call internally at the appropriate time to achieve the purpose of echo and save.
The advantage of doing this is that whenever the code in this repository is updated, you can simply copy the packaged files to your own server. With a slight modification of the 'index. html' page, you can achieve synchronous updates and use your own storage service.
-Of course, there are also certain limitations at present, as' Vue CLI 'does not support' webpack '__ Webpack_ Public_ Path__ Variable, so it is not possible to meet the requirement of setting static resource paths at runtime. The default 'publicPath' is 'dist', so you should place the 'dist' directory and the 'index.html' file at the same level as the server.
If you want to modify the 'publicPath', such as placing static resources in the 'cdn', you can only 'clone' the code of this repository and modify the 'publicPath' configuration of 'web/vue.config.js'. After the code of this repository is updated, you need to pull it again, package it with the modified configuration, and then perform the modification operation of the ' index.html' file earlier. It is recommended to write a 'Node.js' script to complete this task.
+If you want to maintain synchronous updates with the code in this repository as in the previous section, but also want to modify the storage location of static resources, for example, the default hierarchical relationship is:
+-dist
+--css
+--fonts
+--img
+--js
+-logo.ico
+
+-index.html
+And you want to adjust it to this:
+-assets
+--dist
+---css
+---fonts
+---img
+---js
+-logo.ico
+
+-index.html
+So you can configure the 'window.externalPublicPath' in 'index.html' as the default ./dist/ is modified to:
window.externalPublicPath = './assets/dist/'
+At the same time, the paths of the inline '.ico', '.js', and '.css' resources in 'index.html' need to be manually modified by you.
+It should be noted that it is best not to adjust the directory hierarchy within the 'dist' directory, otherwise exceptions may occur.
+If you want to replace some of the static resources, such as the theme image and structure image, with your own designed image, you can directly overwrite it with the same name.
diff --git a/web/src/pages/Doc/zh/deploy/index.md b/web/src/pages/Doc/zh/deploy/index.md index f5141da7..f727705d 100644 --- a/web/src/pages/Doc/zh/deploy/index.md +++ b/web/src/pages/Doc/zh/deploy/index.md @@ -40,7 +40,7 @@ npm run build 如果你想修改打包输出的目录，可以修改`web/vue.config.js`文件的`outputDir`配置，改成你想要输出的路径即可。 -如果你想修改`index.html`文件引用静态资源的路径的话可以修改`web/vue.config.js`文件的`publicPath`配置。 +如果你想修改`index.html`文件引用静态资源的路径的话可以修改`web/vue.config.js`文件的`publicPath`配置。以及`web/public/index.html`文件的`window.externalPublicPath`配置。 另外默认使用的是`hash`路由，也就是路径中会在`#`，如果你想使用`history`路由，可以修改`web/src/router.js`文件，将： @@ -185,6 +185,43 @@ mind-map在容器中启动了8080端口作为web服务入口，通过docker运 这样做的好处是，每当本仓库代码更新了，你可以简单的复制打包后的文件到你自己的服务器，只要稍微修改一下`index.html`页面即可达到同步更新且使用自己的存储服务的目的。 -当然，目前也有一定限制，因为`Vue CLI`不支持`webpack`的`__webpack_public_path__`变量，所以无法实现运行时设置静态资源路径的需求，默认的`publicPath`为`dist`，所以你应该将`dist`目录和`index.html`文件放在服务器的同一层级。 +## 修改静态资源路径 -如果你想修改`publicPath`，比如想把静态资源放到`cdn`，那么你只能`clone`本仓库的代码，然后修改一下`web/vue.config.js`的`publicPath`配置，后续当本仓库的代码更新后，你需要重新拉取，用你修改过的配置进行打包，再进行前面的`index.html`文件的修改操作，推荐写一个`Node.js`脚本来完成该任务。 \ No newline at end of file +如果你想和上一节一样保持和本仓库代码的同步更新，但是又想修改静态资源的存放位置，比如默认的层级关系为： + +``` +-dist +--css +--fonts +--img +--js +-logo.ico + +-index.html +``` + +而你想调整成这样： + +``` +-assets +--dist +---css +---fonts +---img +---js +-logo.ico + +-index.html +``` + +那么你可以将`index.html`中的`window.externalPublicPath`配置由默认的`./dist/`修改为： + +```js +window.externalPublicPath = './assets/dist/' +``` + +同时`index.html`中内联的`.ico`、`.js`、`.css`资源的路径需要你手动修改。 + +需要注意的是，`dist`目录内的目录层级关系最好不要调整，否则可能会出现异常。 + +如果你想替换其中的一些静态资源，比如你想将主题图片和结构的图片替换成你自己设计的图片，那么可以直接同名覆盖。 \ No newline at end of file diff --git a/web/src/pages/Doc/zh/deploy/index.vue b/web/src/pages/Doc/zh/deploy/index.vue index c30b7ba4..04ae656c 100644 --- a/web/src/pages/Doc/zh/deploy/index.vue +++ b/web/src/pages/Doc/zh/deploy/index.vue @@ -25,7 +25,7 @@ npm link simple-mind-map如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。
如果你想把index.html也打包进dist目录，可以修改web/package.json文件的scripts.build命令，把vue-cli-service build && node ../copy.js中的 && node ../copy.js删除即可。
如果你想修改打包输出的目录，可以修改web/vue.config.js文件的outputDir配置，改成你想要输出的路径即可。
如果你想修改index.html文件引用静态资源的路径的话可以修改web/vue.config.js文件的publicPath配置。
如果你想修改index.html文件引用静态资源的路径的话可以修改web/vue.config.js文件的publicPath配置。以及web/public/index.html文件的window.externalPublicPath配置。
另外默认使用的是hash路由，也就是路径中会在#，如果你想使用history路由，可以修改web/src/router.js文件，将：
const router = new VueRouter({
routes
@@ -138,8 +138,34 @@ npm link simple-mind-map
如上所示，当你设置了window.takeOverApp = true标志，应用不再主动进行实例化，而是会将实例化的方法暴露出来由你调用，那么你可以先从后端请求思维导图的数据，然后再注册相关的方法，应用内部会在合适的时机进行调用，从而达到回显和保存的目的。
这样做的好处是，每当本仓库代码更新了，你可以简单的复制打包后的文件到你自己的服务器，只要稍微修改一下index.html页面即可达到同步更新且使用自己的存储服务的目的。
当然，目前也有一定限制，因为Vue CLI不支持webpack的__webpack_public_path__变量，所以无法实现运行时设置静态资源路径的需求，默认的publicPath为dist，所以你应该将dist目录和index.html文件放在服务器的同一层级。
如果你想修改publicPath，比如想把静态资源放到cdn，那么你只能clone本仓库的代码，然后修改一下web/vue.config.js的publicPath配置，后续当本仓库的代码更新后，你需要重新拉取，用你修改过的配置进行打包，再进行前面的index.html文件的修改操作，推荐写一个Node.js脚本来完成该任务。
如果你想和上一节一样保持和本仓库代码的同步更新，但是又想修改静态资源的存放位置，比如默认的层级关系为：
+-dist
+--css
+--fonts
+--img
+--js
+-logo.ico
+
+-index.html
+而你想调整成这样：
+-assets
+--dist
+---css
+---fonts
+---img
+---js
+-logo.ico
+
+-index.html
+那么你可以将index.html中的window.externalPublicPath配置由默认的./dist/修改为：
window.externalPublicPath = './assets/dist/'
+同时index.html中内联的.ico、.js、.css资源的路径需要你手动修改。
需要注意的是，dist目录内的目录层级关系最好不要调整，否则可能会出现异常。
如果你想替换其中的一些静态资源，比如你想将主题图片和结构的图片替换成你自己设计的图片，那么可以直接同名覆盖。
diff --git a/web/src/router.js b/web/src/router.js index 1b25f394..b9804846 100644 --- a/web/src/router.js +++ b/web/src/router.js @@ -3,7 +3,6 @@ import VueRouter from 'vue-router' import EditPage from '@/pages/Edit/Index' import DocPage from '@/pages/Doc/Index' import routerList from '@/pages/Doc/routerList' -import IndexPage from '@/pages/Index/Index' // 处理没有翻译的章节路由 const handleRouterList = () => { @@ -54,7 +53,7 @@ const routes = [ { path: '/index', name: 'Index', - component: IndexPage + component: () => import(`./pages/Index/Index.vue`) }, { path: '/', diff --git a/web/vue.config.js b/web/vue.config.js index 765ae60a..56de072c 100644 --- a/web/vue.config.js +++ b/web/vue.config.js @@ -1,20 +1,35 @@ -const path = require('path'); +const path = require('path') const isDev = process.env.NODE_ENV === 'development' +const WebpackDynamicPublicPathPlugin = require('webpack-dynamic-public-path') module.exports = { - publicPath: isDev ? '' : './dist', - outputDir: '../dist', - lintOnSave: false, - productionSourceMap: false, - chainWebpack: config => { - // 移除 prefetch 插件 - config.plugins.delete('prefetch') - }, - configureWebpack: { - resolve: { - alias: { - '@': path.resolve(__dirname, './src/') - } - } + publicPath: isDev ? '' : './dist', + outputDir: '../dist', + lintOnSave: false, + productionSourceMap: false, + filenameHashing: false, + chainWebpack: config => { + // 移除 preload 插件 + config.plugins.delete('preload') + // 移除 prefetch 插件 + config.plugins.delete('prefetch') + // 支持运行时设置public path + config + .plugin('dynamicPublicPathPlugin') + .use(WebpackDynamicPublicPathPlugin, [ + { externalPublicPath: 'window.externalPublicPath' } + ]) + // 给插入html页面内的js和css添加hash参数 + config.plugin('html').tap(args => { + args[0].hash = true + return args + }) + }, + configureWebpack: { + resolve: { + alias: { + '@': path.resolve(__dirname, './src/') + } } -} \ No newline at end of file + } +}