这个问题要从一个想法说起。
D2Admin是一个开源的,前端中后台集成方案,原先是基于vue-cli2,大概是向vue-cli3过渡时,
作者老李,想在页面右下角加个切换点击,跳到当前页面源码对应的github页面。
确实很实用的功能,D2Admin的演示页面太多了,想看某个页面的源码,对于不熟悉项目目录结构的新手很不友好。
这些页面统一为.vue组件,那么转换一下:如何获取vue单文件自身源码路径?
目前经历了三个方案,最终目标是把自身路径赋值到这个。选择美元。__source上。目前方案3是最新的。
直接使用节点中的__filename变量:
& lt; template>
& lt; h2>{{$选项。__source}} & lt;/h2>
& lt;/template>
& lt; script>
出口默认{
安装(){
选择美元。__source=__filename
}
}
& lt;/script>
之前
因为webpack编译时,会把源码文件在内部转为节点模块,。vue文件中脚本的内容也被转换了,
其中的__filename在编译时被运行,直接得到当前文件自身路径。
使用这个变量还需要在webpack配置中启用node.__filename:
/* vue.config。js */模块。出口={//?
chainWebpack:配置=比;{//?
config.node
这里(__dirname,真的)//同理
这里(__filename,真的)
}
};
之前
缺点
<李>要在每个组件里手动赋值,还不能用mixin李
<李> __filename得到的路径在部分.vue文件下并不准确,路径可能还会带附带变量的李
一开始,坚强的老李用这个方式,给上百个组件手动挂上了路径,但总比手动写死每个路径要好
在装载机层面,其实vue-loader提供了一个exposeFilename选项,只要启用,
就会给每个.vue组件带上。选择美元。__file,上面有准确的路径。
这样只需要改装载机配置:
/* vue.config。js */模块。出口={//?
chainWebpack:配置=比;{//?
config.module
.rule (vue)
.use (“vue-loader”)
.loader (“vue-loader”)
. tap(选项=比;{
选项。exposeFilename=true
返回选项
}）
}
};
之前
开发环境默认是开启exposeFilename的。
此时组件内应该直接取。选择美元。__file,内容大致为src/foo/bar.vue。
缺点
为了安全,vue-loader在生产环境将__file赋值为文件名,非路径名,详见文档
后来得知这个方法,老李就第一时间改代码,删了方案1中的所有附加代码,结果发现生产环境结果不一致,翻车了下跪
既然方案2不让在生产环境用,那就自己写装载机去加上这个源码路径,这里采用了自定义块。
这个方法是慢慢调试自定义的装载机摸索出来的,先在vue-loader之前加自定义的装载机,
去注入自定义块代码,再在全局加入一个针对该自定义块的装载机b .
这里将方案封装,在chainWebpack中调用即可:
/* vue.config。js */const VueFilenameInjector=要求(“。/道路//vue-filename-injector”)
模块。出口={
chainWebpack:配置=比;{
VueFilenameInjector(配置,{
propName:“__source”//违约
}）
}
}
之前
源码参考:@d2-projects/d2-advance/工具/vue-filename-injector
．
└──vue-filename-injector
├──README.md
├──index.js
└──src
├──index.js
└──自由
├──config.js
├──injector.js
└──loader.js
之前
vue-filename-injector/index.js:
const {blockName}=要求(“。/lib/config.js”)//chainWebpack
模块。出口=函数(配置、期权){//注入
config.module
.rule (vue)
.use (“vue-filename-injector”)
.loader (require.resolve (’。/lib/injector.js '))
.options(选项)
后(vue-loader)//不知为何.before()不是预期的结果,这里就绕了一下
指标(最终)//解析
config.module
.rule (")
.resourceQuery(新RegExp (blockType=$ {blockName}))
.use (“vue-filename-injector-loader”)
.loader (require.resolve (’。/lib/loader.js '))
指标(最终)
}
