如何获取vue单文件自身源码路径

程序员文章站 2023-12-01 11:46:40

这个问题要从一个想法说起。 d2admin 是一个开源的，前端中后台集成方案，原先是基于 vue-cli2，大概是向 vue-cli3 过渡时，作者老李，想在页面右下...

这个问题要从一个想法说起。

d2admin 是一个开源的，前端中后台集成方案，原先是基于 vue-cli2，大概是向 vue-cli3 过渡时，
作者老李，想在页面右下角加个 toggle 点击，跳到当前页面源码对应的 github 页面。

确实很实用的功能，d2admin 的 demo 页面太多了，想看某个页面的源码，对于不熟悉项目目录结构的新手很不友好。
这些页面统一为 .vue 组件，那么转换一下：如何获取 vue 单文件自身源码路径？

目前经历了三个方案，最终目标是把自身路径赋值到 this.$options.__source 上。目前方案 3 是最新的。

方案 1 ：node + __filename

直接使用 node 中的 __filename 变量：

<template>
 <h1>{{ $options.__source }}</h1>
</template>

<script>
export default {
 mounted() {
  this.$options.__source = __filename
 }
}
</script>

因为 webpack 编译时，会把源码文件在内部转为 node 模块，.vue 文件中的 script 内容也被转换了，
其中的 __filename 在编译时被运行，直接得到当前文件自身路径。

使用这个变量还需要在 webpack 配置中启用 node.__filename：

/* vue.config.js */
module.exports = {
 // ...
 chainwebpack: config => {
  // ...
  config.node
   .set('__dirname', true) // 同理
   .set('__filename', true)
 }
};

缺点

要在每个组件里手动赋值，还不能用 mixin
__filename 得到的路径在部分 .vue 文件下并不准确，路径可能还会带附带 querystring

一开始，坚强的老李用这个方式，给上百个组件手动挂上了路径，但总比手动写死每个路径要好

方案 2 ：vue-loader + exposefilename

在 loader 层面，其实 vue-loader 提供了一个 exposefilename 选项，只要启用，
就会给每个 .vue 组件带上 this.$options.__file，上面有准确的路径。
这样只需要改 loader 配置：

/* vue.config.js */
module.exports = {
 // ...
 chainwebpack: config => {
  // ...
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
     options.exposefilename = true
     return options
    })
 }
};

开发环境默认是开启 exposefilename 的。

此时组件内应该直接取 this.$options.__file，内容大致为 src/foo/bar.vue。

缺点

为了安全，vue-loader 在生产环境将 __file 赋值为文件名，非路径名，

后来得知这个方法，老李就第一时间改代码，删了方案 1 中的所有附加代码，结果发现生产环境结果不一致，翻车了orz

方案 3 ：loader + custom block

既然方案 2 不让在生产环境用，那就自己写 loader 去加上这个源码路径，这里采用了custom block。

这个方法是慢慢调试自定义的 loader 摸索出来的，先在 vue-loader 之前加自定义的 loader a，

去注入 custom block 代码，再在全局加入一个针对该 custom block 的 loader b。

这里将方案封装，在 chainwebpack 中调用即可：

/* vue.config.js */
const vuefilenameinjector = require('./path/to/vue-filename-injector')

module.exports = {
 chainwebpack: config => {
  vuefilenameinjector(config, {
   propname: '__source' // default
  })
 }
}

源码参考

.
└── vue-filename-injector
  ├── readme.md
  ├── index.js
  └── src
    ├── index.js
    └── lib
      ├── config.js
      ├── injector.js
      └── loader.js

vue-filename-injector/index.js：

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') // 不知为何 .before() 不是预期的结果，这里就绕了一下
  .end()
 // 解析
 config.module
  .rule('')
  .resourcequery(new regexp(`blocktype=${blockname}`))
  .use('vue-filename-injector-loader')
  .loader(require.resolve('./lib/loader.js'))
  .end()
}

vue-filename-injector/lib/config.js：

const defaultpropname = '__source'
const blockname = 'vue-filename-injector'

module.exports = {
 defaultpropname,
 blockname
}

vue-filename-injector/lib/injector.js，源码部分来自 vue-loader：

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
}

vue-filename-injector/lib/loader.js：

module.exports = function(source, map) {
 this.callback(null, source, map)
}