diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id
index 09d15757..3d28210c 100644
--- a/package-lock.json.REMOVED.git-id
+++ b/package-lock.json.REMOVED.git-id
@@ -1 +1 @@
-2d1d8a6a7dab70bae911bb5cd7870ee1ddb3274e
\ No newline at end of file
+42a3d5d650896fbe2d4a2a381a8a41e5074968f4
\ No newline at end of file
diff --git a/package.json b/package.json
index d73e8490..7bc05209 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "vuex": "^3.1.1"
   },
   "devDependencies": {
+    "@d2-projects/vue-filename-injector": "^1.0.0",
     "@kazupon/vue-i18n-loader": "^0.3.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
diff --git a/src/views/demo/playground/locales/index.vue b/src/views/demo/playground/locales/index.vue
index 064755e2..c1299714 100644
--- a/src/views/demo/playground/locales/index.vue
+++ b/src/views/demo/playground/locales/index.vue
@@ -19,4 +19,4 @@
       title="文档"
       link="https://doc.d2admin.fairyever.com/zh/sys-locales/"/>
   </d2-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/demo/playground/page-cache/params.vue b/src/views/demo/playground/page-cache/params.vue
index e74ae757..c1a50429 100644
--- a/src/views/demo/playground/page-cache/params.vue
+++ b/src/views/demo/playground/page-cache/params.vue
@@ -4,7 +4,7 @@
       <el-button
         size="mini"
         type="primary">
-        props.id = {{id}}  
+        props.id = {{id}}
       </el-button>
     </template>
     <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
diff --git a/tools/vue-filename-injector/README.md b/tools/vue-filename-injector/README.md
deleted file mode 100755
index 5f2f84a9..00000000
--- a/tools/vue-filename-injector/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Vue Filename Injector
-
-Inject the file path of the `.vue` on `this.$options.__source`.
-
-## Usage
-
-`vue.config.js`:
-
-``` js
-const VueFilenameInjector = require('./path/to/vue-filename-injector')
-
-module.exports = {
-
-  chainWebpack: config => {
-    // only with chainWebpack
-    VueFilenameInjector(config, {
-      propName: '__source' // default
-    })
-  }
-}
-```
-
-## Relevant
-
-https://github.com/neutrinojs/webpack-chain
-https://vue-loader.vuejs.org/guide/custom-blocks.html
diff --git a/tools/vue-filename-injector/index.js b/tools/vue-filename-injector/index.js
deleted file mode 100755
index 8a97e45a..00000000
--- a/tools/vue-filename-injector/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const all = require('./src/index.js')
-module.exports = all
diff --git a/tools/vue-filename-injector/src/index.js b/tools/vue-filename-injector/src/index.js
deleted file mode 100755
index 52885180..00000000
--- a/tools/vue-filename-injector/src/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const { blockName } = require('./lib/config.js')
-
-// for chainWebpack
-module.exports = function(config, options) {
-  config.module
-    .rule('vue')
-    .use('vue-filename-injector')
-    .loader(require.resolve('./lib/injector.js'))
-    .options(options)
-    .after('vue-loader')
-    .end()
-  config.module
-    .rule('')
-    .resourceQuery(new RegExp(`blockType=${blockName}`))
-    .use('vue-filename-injector-loader')
-    .loader(require.resolve('./lib/loader.js'))
-    .end()
-}
diff --git a/tools/vue-filename-injector/src/lib/config.js b/tools/vue-filename-injector/src/lib/config.js
deleted file mode 100755
index 7910167a..00000000
--- a/tools/vue-filename-injector/src/lib/config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const defaultPropName = '__source'
-const blockName = 'vue-filename-injector'
-
-module.exports = {
-  defaultPropName,
-  blockName
-}
diff --git a/tools/vue-filename-injector/src/lib/injector.js b/tools/vue-filename-injector/src/lib/injector.js
deleted file mode 100755
index 390dd9c8..00000000
--- a/tools/vue-filename-injector/src/lib/injector.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const path = require('path')
-const loaderUtils = require('loader-utils')
-
-const { blockName, defaultPropName } = require('./config.js')
-
-module.exports = function (content /*, map, meta */) {
-  const loaderContext = this
-
-  const {
-    rootContext,
-    resourcePath
-  } = loaderContext
-
-  const context = rootContext || process.cwd()
-  const options = loaderUtils.getOptions(loaderContext) || {}
-  const rawShortFilePath = path
-    .relative(context, resourcePath)
-    .replace(/^(\.\.[\/\\])+/, '')
-
-  const propName = options.propName || defaultPropName
-
-  content += `
-<${blockName}>
-export default function (Component) {
-  Component.options.${propName} = ${JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))}
-}
-</${blockName}>
-`
-  return content
-}
diff --git a/tools/vue-filename-injector/src/lib/loader.js b/tools/vue-filename-injector/src/lib/loader.js
deleted file mode 100755
index 1590b7f4..00000000
--- a/tools/vue-filename-injector/src/lib/loader.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = function (source, map) {
-  this.callback(null, source, map)
-}
diff --git a/vue.config.js b/vue.config.js
index 0378b75f..dc5f8ce6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,4 @@
-const VueFilenameInjector = require('./tools/vue-filename-injector')
+const VueFilenameInjector = require('@d2-projects/vue-filename-injector')
 
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const forElementUI = require('webpack-theme-color-replacer/forElementUI')