如何獲取vue單文件自身源碼路徑
這個(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，
去注入 Custom Block 代碼，再在全局加入一個(gè)針對(duì)該 Custom Block 的 loader B。
這里將方案封裝，在 chainWebpack 中調(diào)用即可：
/* 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() 不是預(yù)期的結(jié)果，這里就繞了一下
.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)
}
相關(guān)倉庫
可進(jìn)入預(yù)覽頁面查看效果，在右下角有 Toggle
github.com/d2-projects… （可能還在翻車中）
總結(jié)
目前看來，用自定義 loader 去注入代碼是最便捷的方案，不用在每個(gè)組件中手寫重復(fù)的代碼。
由于 vue-cli3 采用 chainWebpack，加上個(gè)人對(duì) webpack 的理解更是不深，暫時(shí)采用方案 3。
以上所述是小編給大家介紹的如何獲取vue單文件自身源碼路徑詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue+elementUI動(dòng)態(tài)生成面包屑導(dǎo)航教程
今天小編就為大家分享一篇vue+elementUI動(dòng)態(tài)生成面包屑導(dǎo)航教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue登錄主頁動(dòng)態(tài)背景短視頻的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
EPUB.js是一個(gè)基于JavaScript的庫,用于從電子書中提取內(nèi)容,這篇文章主要為大家詳細(xì)介紹了vue如何使用epubjs實(shí)現(xiàn)電子書的功能,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決
這篇文章主要介紹了vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了教你搭建按需加載的Vue組件庫(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue組件間通信方式全面匯總，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04