use vue-filename-injector

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",

src/views/demo/playground/locales/index.vue

@@ -19,4 +19,4 @@
       title="文档"
       link="https://doc.d2admin.fairyever.com/zh/sys-locales/"/>
   </d2-container>
-</template>
+</template>

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>

tools/vue-filename-injector/README.md

@@ -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

tools/vue-filename-injector/index.js

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

tools/vue-filename-injector/src/index.js

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

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

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

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

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

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

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

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')