Demo：1.打包不修改静态资源的文件名；2.支持运行时设置静态资源路径

2026-02-17 14:04:47 +08:00 · 2023-08-01 18:54:40 +08:00
parent 080d7489e7
commit 27a0efa4e0
11 changed files with 189 additions and 33 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -35,7 +35,8 @@
        "prettier": "^1.19.1",
        "vconsole": "^3.15.1",
        "vue-template-compiler": "^2.6.11",
-        "webpack": "^4.44.2"
+        "webpack": "^4.44.2",
+        "webpack-dynamic-public-path": "^1.0.8"
      }
    },
    "node_modules/@achrinza/node-ipc": {
@@ -16224,6 +16225,12 @@
        "decamelize": "^1.2.0"
      }
    },
+    "node_modules/webpack-dynamic-public-path": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/webpack-dynamic-public-path/-/webpack-dynamic-public-path-1.0.8.tgz",
+      "integrity": "sha512-AF6onorpvmiC+I/dQ19SOi+oN66oEy9h4deam7gPs1Qa1mOQ9i7IRsOahaukohKAciys7NfX+YFboRn4rmpuKw==",
+      "dev": true
+    },
    "node_modules/webpack-log": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
@@ -29476,6 +29483,12 @@
        }
      }
    },
+    "webpack-dynamic-public-path": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/webpack-dynamic-public-path/-/webpack-dynamic-public-path-1.0.8.tgz",
+      "integrity": "sha512-AF6onorpvmiC+I/dQ19SOi+oN66oEy9h4deam7gPs1Qa1mOQ9i7IRsOahaukohKAciys7NfX+YFboRn4rmpuKw==",
+      "dev": true
+    },
    "webpack-log": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -40,7 +40,8 @@
    "prettier": "^1.19.1",
    "vconsole": "^3.15.1",
    "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.44.2"
+    "webpack": "^4.44.2",
+    "webpack-dynamic-public-path": "^1.0.8"
  },
  "eslintConfig": {
    "root": true,
--- a/web/public/enJFNMHnedQTYTESGfDkctCp2.jpeg
+++ b/web/public/enJFNMHnedQTYTESGfDkctCp2.jpeg
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -4,9 +4,11 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-    <link rel="icon" href="./dist/logo.ico">
+    <link rel="icon" href="dist/logo.ico">
    <title>思绪思维导图</title>
    <script>
+      // 自定义静态资源的路径
+      window.externalPublicPath = './dist/'
      // 接管应用
      window.takeOverApp = false
    </script>
--- a/web/public/logo.png
+++ b/web/public/logo.png
--- a/web/src/pages/Doc/en/deploy/index.md
+++ b/web/src/pages/Doc/en/deploy/index.md
@@ -40,7 +40,7 @@ If you want to package 'index.html' into the 'dist' directory as well, you can m

 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:

@@ -187,6 +187,43 @@ As shown above, when you set the 'window.takeOverApp=true' flag, the application

 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.
+## Modifying Static Resource Paths

-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:
+
+```js
+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.
--- a/web/src/pages/Doc/en/deploy/index.vue
+++ b/web/src/pages/Doc/en/deploy/index.vue
@@ -25,7 +25,7 @@ npm link simple-mind-map
 <p>If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.</p>
 <p>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 '&amp;&amp; node ../copy.js' from 'vue-cli-service build &amp;&amp; node ../copy.js'.</p>
 <p>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.</p>
-<p>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.</p>
+<p>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 <code>window.externalPublicPath</code> config in <code>web/public/index.html</code> file.</p>
 <p>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:</p>
 <pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
  routes
@@ -143,8 +143,34 @@ npm link simple-mind-map
 </code></pre>
 <p>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.</p>
 <p>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.</p>
-<p>Of course, there are also certain limitations at present, as' Vue CLI 'does not support' webpack '<code>__ Webpack_ Public_ Path__</code> 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.</p>
-<p>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.</p>
+<h2>Modifying Static Resource Paths</h2>
+<p>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:</p>
+<pre class="hljs"><code>-dist
+--css
+--fonts
+--img
+--js
+-logo.ico
+
+-index.html
+</code></pre>
+<p>And you want to adjust it to this:</p>
+<pre class="hljs"><code>-assets
+--dist
+---css
+---fonts
+---img
+---js
+-logo.ico
+
+-index.html
+</code></pre>
+<p>So you can configure the 'window.externalPublicPath' in 'index.html' as the default <code>./dist/</code> is modified to:</p>
+<pre class="hljs"><code><span class="hljs-built_in">window</span>.externalPublicPath = <span class="hljs-string">&#x27;./assets/dist/&#x27;</span>
+</code></pre>
+<p>At the same time, the paths of the inline '.ico', '.js', and '.css' resources in 'index.html' need to be manually modified by you.</p>
+<p>It should be noted that it is best not to adjust the directory hierarchy within the 'dist' directory, otherwise exceptions may occur.</p>
+<p>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.</p>

  </div>
 </template>
--- 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`脚本来完成该任务。
+如果你想和上一节一样保持和本仓库代码的同步更新，但是又想修改静态资源的存放位置，比如默认的层级关系为：
+
+```
+-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`目录内的目录层级关系最好不要调整，否则可能会出现异常。
+
+如果你想替换其中的一些静态资源，比如你想将主题图片和结构的图片替换成你自己设计的图片，那么可以直接同名覆盖。
--- 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
 <p>如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。</p>
 <p>如果你想把<code>index.html</code>也打包进<code>dist</code>目录，可以修改<code>web/package.json</code>文件的<code>scripts.build</code>命令，把<code>vue-cli-service build &amp;&amp; node ../copy.js</code>中的<code> &amp;&amp; node ../copy.js</code>删除即可。</p>
 <p>如果你想修改打包输出的目录，可以修改<code>web/vue.config.js</code>文件的<code>outputDir</code>配置，改成你想要输出的路径即可。</p>
-<p>如果你想修改<code>index.html</code>文件引用静态资源的路径的话可以修改<code>web/vue.config.js</code>文件的<code>publicPath</code>配置。</p>
+<p>如果你想修改<code>index.html</code>文件引用静态资源的路径的话可以修改<code>web/vue.config.js</code>文件的<code>publicPath</code>配置。以及<code>web/public/index.html</code>文件的<code>window.externalPublicPath</code>配置。</p>
 <p>另外默认使用的是<code>hash</code>路由，也就是路径中会在<code>#</code>，如果你想使用<code>history</code>路由，可以修改<code>web/src/router.js</code>文件，将：</p>
 <pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
  routes
@@ -138,8 +138,34 @@ npm link simple-mind-map
 </code></pre>
 <p>如上所示，当你设置了<code>window.takeOverApp = true</code>标志，应用不再主动进行实例化，而是会将实例化的方法暴露出来由你调用，那么你可以先从后端请求思维导图的数据，然后再注册相关的方法，应用内部会在合适的时机进行调用，从而达到回显和保存的目的。</p>
 <p>这样做的好处是，每当本仓库代码更新了，你可以简单的复制打包后的文件到你自己的服务器，只要稍微修改一下<code>index.html</code>页面即可达到同步更新且使用自己的存储服务的目的。</p>
-<p>当然，目前也有一定限制，因为<code>Vue CLI</code>不支持<code>webpack</code>的<code>__webpack_public_path__</code>变量，所以无法实现运行时设置静态资源路径的需求，默认的<code>publicPath</code>为<code>dist</code>，所以你应该将<code>dist</code>目录和<code>index.html</code>文件放在服务器的同一层级。</p>
-<p>如果你想修改<code>publicPath</code>，比如想把静态资源放到<code>cdn</code>，那么你只能<code>clone</code>本仓库的代码，然后修改一下<code>web/vue.config.js</code>的<code>publicPath</code>配置，后续当本仓库的代码更新后，你需要重新拉取，用你修改过的配置进行打包，再进行前面的<code>index.html</code>文件的修改操作，推荐写一个<code>Node.js</code>脚本来完成该任务。</p>
+<h2>修改静态资源路径</h2>
+<p>如果你想和上一节一样保持和本仓库代码的同步更新，但是又想修改静态资源的存放位置，比如默认的层级关系为：</p>
+<pre class="hljs"><code>-dist
+--css
+--fonts
+--img
+--js
+-logo.ico
+
+-index.html
+</code></pre>
+<p>而你想调整成这样：</p>
+<pre class="hljs"><code>-assets
+--dist
+---css
+---fonts
+---img
+---js
+-logo.ico
+
+-index.html
+</code></pre>
+<p>那么你可以将<code>index.html</code>中的<code>window.externalPublicPath</code>配置由默认的<code>./dist/</code>修改为：</p>
+<pre class="hljs"><code><span class="hljs-built_in">window</span>.externalPublicPath = <span class="hljs-string">&#x27;./assets/dist/&#x27;</span>
+</code></pre>
+<p>同时<code>index.html</code>中内联的<code>.ico</code>、<code>.js</code>、<code>.css</code>资源的路径需要你手动修改。</p>
+<p>需要注意的是，<code>dist</code>目录内的目录层级关系最好不要调整，否则可能会出现异常。</p>
+<p>如果你想替换其中的一些静态资源，比如你想将主题图片和结构的图片替换成你自己设计的图片，那么可以直接同名覆盖。</p>

  </div>
 </template>
--- 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: '/', 
--- 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/')
+      }
    }
-}
+  }
+}