亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何獲取vue單文件自身源碼路徑

 更新時間:2019年05月06日 15:21:25   作者:CNine  
這篇文章主要介紹了如何獲取vue單文件自身源碼路徑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

這個問題要從一個想法說起。

D2Admin 是一個開源的,前端中后臺集成方案,原先是基于 vue-cli2,大概是向 vue-cli3 過渡時,
作者老李,想在頁面右下角加個 Toggle 點擊,跳到當前頁面源碼對應的 github 頁面。

確實很實用的功能,D2Admin 的 Demo 頁面太多了,想看某個頁面的源碼,對于不熟悉項目目錄結構的新手很不友好。
這些頁面統(tǒng)一為 .vue 組件,那么轉換一下:如何獲取 vue 單文件自身源碼路徑?

目前經(jīng)歷了三個方案,最終目標是把自身路徑賦值到 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
    })
 }
};

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

此時組件內應該直接取 this.$options.__file,內容大致為 src/foo/bar.vue。

缺點

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

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

方案 3 :loader + Custom Block

既然方案 2 不讓在生產(chǎn)環(huán)境用,那就自己寫 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單文件自身源碼路徑詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • vite+vue3代碼風格校驗及格式化方式

    vite+vue3代碼風格校驗及格式化方式

    這篇文章主要介紹了vite+vue3代碼風格校驗及格式化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • daisyUI解決TailwindCSS堆砌class問題詳解

    daisyUI解決TailwindCSS堆砌class問題詳解

    這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • vue+elementUI動態(tài)生成面包屑導航教程

    vue+elementUI動態(tài)生成面包屑導航教程

    今天小編就為大家分享一篇vue+elementUI動態(tài)生成面包屑導航教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue中webpack的使用詳解

    Vue中webpack的使用詳解

    這篇文章主要為大家詳細介紹了Vue中webpack的使用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • Vue登錄主頁動態(tài)背景短視頻制作

    Vue登錄主頁動態(tài)背景短視頻制作

    這篇文章主要為大家詳細介紹了Vue登錄主頁動態(tài)背景短視頻的制作方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Vue使用epubjs電子書的教程詳解

    Vue使用epubjs電子書的教程詳解

    EPUB.js是一個基于JavaScript的庫,用于從電子書中提取內容,這篇文章主要為大家詳細介紹了vue如何使用epubjs實現(xiàn)電子書的功能,感興趣的小伙伴可以學習一下
    2023-11-11
  • vue.config.js配置proxy代理產(chǎn)生404錯誤的原因及解決

    vue.config.js配置proxy代理產(chǎn)生404錯誤的原因及解決

    這篇文章主要介紹了vue.config.js配置proxy代理產(chǎn)生404錯誤的原因及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue-cli 打包后提交到線上出現(xiàn)

    vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報

    這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 教你搭建按需加載的Vue組件庫(小結)

    教你搭建按需加載的Vue組件庫(小結)

    這篇文章主要介紹了教你搭建按需加載的Vue組件庫(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-07-07
  • Vue組件間通信方式全面匯總介紹

    Vue組件間通信方式全面匯總介紹

    這篇文章主要介紹了Vue組件間通信方式全面匯總,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧
    2023-04-04

最新評論