Use https://github.com/d2-projects/d2-advance/tree/master/tools/vue-filename-injector

Former-commit-id: a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly a29546c3c7db3bd054f5152ee83090ac867c3ef6 [formerly 188d1c6292e0d7f7f03006204bf273ac9a2f9977 [formerly fed4de2ac75aaaef6f53e956eeefa9ffb1f9488e]]]]]
Former-commit-id: c92e5a290e02f7bd42c900fe876b5c39a3c65b96
Former-commit-id: 03cc8603d0c0ea41061c93d148ccd27392a734b7
Former-commit-id: 386bcbbd1cda7d937586276d44c6700bd5f2179c [formerly 97afb45274677dd9fd150820ac013841c5c57ffd]
Former-commit-id: 690a6d79c1150a087f44f9e04fcfd6ddd0533104
Former-commit-id: 9733ed87d2468567430f9ab12974456ed41d1ba8
Former-commit-id: 565f61c0bde06f9f595cb1ee17474d09f1e64345
Former-commit-id: 316ed7256b3a814848af2651a057b7ae910f3421
Former-commit-id: 6d583d013f77297bf905b8b84bd5808b08db14c7

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
     }

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

tools/vue-filename-injector/index.js

@@ -0,0 +1,2 @@
+const all = require('./src/index.js')
+module.exports = all

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()
+}

tools/vue-filename-injector/src/lib/config.js

@@ -0,0 +1,7 @@
+const defaultPropName = '__source'
+const blockName = 'vue-filename-injector'
+
+module.exports = {
+  defaultPropName,
+  blockName
+}

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
+}

tools/vue-filename-injector/src/lib/loader.js

@@ -0,0 +1,3 @@
+module.exports = function (source, map) {
+  this.callback(null, source, map)
+}

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 => {