diff --git a/docs/options.md b/docs/options.md
index c10180561..2be9e0314 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -81,3 +81,7 @@ Compiled the component for usage inside Shadow DOM. In this mode, the styles of
 - default: `undefined`
 
 When both options are specified, enables file-system-based template compilation caching (requires `cache-loader` to be installed in the same project).
+
+::: tip
+  Interaction between `vue-loader` and `cache-loader` uses [inline loader import syntax](https://webpack.js.org/concepts/loaders/#inline) under the hook, the `!` will be treated as the separator between different loaders, so please ensure `cacheDirectory` doesn't contain `!`.
+:::
diff --git a/docs/zh/options.md b/docs/zh/options.md
index b8bfbfcbb..1cf0dc684 100644
--- a/docs/zh/options.md
+++ b/docs/zh/options.md
@@ -81,3 +81,7 @@ sidebar: auto
 - 默认值：`undefined`
 
 当这两个选项同时被设置时，开启基于文件系统的模板编译缓存 (需要在工程里安装 `cache-loader`)。
+
+::: tip 注意
+  在内部，`vue-loader` 和 `cache-loader` 之间的交互使用了 [loader 的内联 import 语法](https://webpack.js.org/concepts/loaders/#inline)，`!` 将会被认为是不同 loaders 之间的分隔符，所以请确保你的 `cacheDirectory` 路径中不包含 `!`。
+:::
diff --git a/lib/loaders/pitcher.js b/lib/loaders/pitcher.js
index 9ed4ceece..184e8fd09 100644
--- a/lib/loaders/pitcher.js
+++ b/lib/loaders/pitcher.js
@@ -1,5 +1,6 @@
 const qs = require('querystring')
 const loaderUtils = require('loader-utils')
+const hash = require('hash-sum')
 const selfPath = require.resolve('../index')
 const templateLoaderPath = require.resolve('./templateLoader')
 const stylePostLoaderPath = require.resolve('./stylePostLoader')
@@ -74,7 +75,7 @@ module.exports.pitch = function (remainingRequest) {
     const cacheLoader = cacheDirectory && cacheIdentifier
       ? [`cache-loader?${JSON.stringify({
         cacheDirectory,
-        cacheIdentifier: cacheIdentifier + '-vue-loader-template'
+        cacheIdentifier: hash(cacheIdentifier) + '-vue-loader-template'
       })}`]
       : []
     const request = genRequest([