diff --git a/src/components/d2-container/components/d2-source.vue b/src/components/d2-container/components/d2-source.vue
index 1ba8f125..a9c1dea3 100644
--- a/src/components/d2-container/components/d2-source.vue
+++ b/src/components/d2-container/components/d2-source.vue
@@ -25,7 +25,7 @@ export default {
   watch: {
     $route: {
       handler (to) {
-        this.path = get(last(to.matched), 'components.default.__file')
+        this.path = get(last(to.matched), 'components.default.__source')
       },
       immediate: true
     }
diff --git a/tools/vue-filename-injector/README.md b/tools/vue-filename-injector/README.md
new file mode 100755
index 00000000..5f2f84a9
--- /dev/null
+++ b/tools/vue-filename-injector/README.md
@@ -0,0 +1,26 @@
+# 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
new file mode 100755
index 00000000..8a97e45a
--- /dev/null
+++ b/tools/vue-filename-injector/index.js
@@ -0,0 +1,2 @@
+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
new file mode 100755
index 00000000..52885180
--- /dev/null
+++ b/tools/vue-filename-injector/src/index.js
@@ -0,0 +1,18 @@
+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
new file mode 100755
index 00000000..7910167a
--- /dev/null
+++ b/tools/vue-filename-injector/src/lib/config.js
@@ -0,0 +1,7 @@
+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
new file mode 100755
index 00000000..390dd9c8
--- /dev/null
+++ b/tools/vue-filename-injector/src/lib/injector.js
@@ -0,0 +1,30 @@
+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
new file mode 100755
index 00000000..1590b7f4
--- /dev/null
+++ b/tools/vue-filename-injector/src/lib/loader.js
@@ -0,0 +1,3 @@
+module.exports = function (source, map) {
+  this.callback(null, source, map)
+}
diff --git a/vue.config.js b/vue.config.js
index 22eac148..55b6ed1e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,6 @@
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const VueFilenameInjector = require('./tools/vue-filename-injector')
+
 
 // 拼接路径
 const resolve = dir => require('path').join(__dirname, dir)
@@ -46,14 +48,9 @@ module.exports = {
       )
       // TRAVIS 构建 vue-loader 添加 filename
       .when(process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development',
-        config => config.module
-          .rule('vue')
-          .use('vue-loader')
-          .loader('vue-loader')
-          .tap(options => {
-            options.exposeFilename = true
-            return options
-          })
+        VueFilenameInjector(config, {
+          propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
+        })
       )
       // 非开发环境
       .when(process.env.NODE_ENV !== 'development', config => {