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


Posted in Javascript onMay 06, 2019

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

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)
 }
};

缺点

  1. 要在每个组件里手动赋值,还不能用 mixin
  2. __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
  })
 }
}

源码参考:@d2-projects/d2-advance/tools/vue-filename-injector

.
└── 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)
}

相关仓库

可进入预览页面查看效果,在右下角有 Toggle

github.com/d2-projects… (可能还在翻车中)

github.com/d2-projects…

总结

目前看来,用自定义 loader 去注入代码是最便捷的方案,不用在每个组件中手写重复的代码。

由于 vue-cli3 采用 chainWebpack,加上个人对 webpack 的理解更是不深,暂时采用方案 3。

以上所述是小编给大家介绍的如何获取vue单文件自身源码路径详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JS实现小星星特效
Dec 24 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
用Vue编写抽象组件的方法
May 06 #Javascript
JS解惑之Object中的key是有序的么
May 06 #Javascript
微信小程序和百度的语音识别接口详解
May 06 #Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 #Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 #Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 #Javascript
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PDO::query讲解
2019/01/29 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
JS与C#编码解码
2013/12/03 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
工作自荐信
2013/12/11 职场文书
数学系个人求职信范文
2014/01/30 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers
python内置模块之上下文管理contextlib
2022/06/14 Python