這個(gè)問題要從一個(gè)想法說起。

D2Admin 是一個(gè)開源的，前端中后臺(tái)集成方案，原先是基于 vue-cli2，大概是向 vue-cli3 過渡時(shí)，
作者老李，想在頁面右下角加個(gè) Toggle 點(diǎn)擊，跳到當(dāng)前頁面源碼對(duì)應(yīng)的 github 頁面。

確實(shí)很實(shí)用的功能，D2Admin 的 Demo 頁面太多了，想看某個(gè)頁面的源碼，對(duì)于不熟悉項(xiàng)目目錄結(jié)構(gòu)的新手很不友好。
這些頁面統(tǒng)一為 .vue 組件，那么轉(zhuǎn)換一下：如何獲取 vue 單文件自身源碼路徑？

目前經(jīng)歷了三個(gè)方案，最終目標(biāo)是把自身路徑賦值到 this.$options.__source 上。目前方案 3 是最新的。

方案 1 ：node + __filename

直接使用 node 中的 __filename 變量：

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

因?yàn)?webpack 編譯時(shí)，會(huì)把源碼文件在內(nèi)部轉(zhuǎn)為 node 模塊，.vue 文件中的 script 內(nèi)容也被轉(zhuǎn)換了，
其中的 __filename 在編譯時(shí)被運(yùn)行，直接得到當(dāng)前文件自身路徑。

使用這個(gè)變量還需要在 webpack 配置中啟用 node.__filename：

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

缺點(diǎn)

要在每個(gè)組件里手動(dòng)賦值，還不能用 mixin __filename 得到的路徑在部分 .vue 文件下并不準(zhǔn)確，路徑可能還會(huì)帶附帶 querystring

一開始，堅(jiān)強(qiáng)的老李用這個(gè)方式，給上百個(gè)組件手動(dòng)掛上了路徑，但總比手動(dòng)寫死每個(gè)路徑要好

方案 2 ：vue-loader + exposeFilename

在 loader 層面，其實(shí) vue-loader 提供了一個(gè) exposeFilename 選項(xiàng)，只要啟用，
就會(huì)給每個(gè) .vue 組件帶上 this.$options.__file，上面有準(zhǔn)確的路徑。
這樣只需要改 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    }) }};

開發(fā)環(huán)境默認(rèn)是開啟 exposeFilename 的。

此時(shí)組件內(nèi)應(yīng)該直接取 this.$options.__file，內(nèi)容大致為 src/foo/bar.vue。

缺點(diǎn)

為了安全，vue-loader 在生產(chǎn)環(huán)境將 __file 賦值為文件名，非路徑名，詳見文檔

后來得知這個(gè)方法，老李就第一時(shí)間改代碼，刪了方案 1 中的所有附加代碼，結(jié)果發(fā)現(xiàn)生產(chǎn)環(huán)境結(jié)果不一致，翻車了orz

方案 3 ：loader + Custom Block

既然方案 2 不讓在生產(chǎn)環(huán)境用，那就自己寫 loader 去加上這個(gè)源碼路徑，這里采用了Custom Block。

這個(gè)方法是慢慢調(diào)試自定義的 loader 摸索出來的，先在 vue-loader 之前加自定義的 loader A，