導航:首頁 > 文件目錄 > vue使用絕對路徑引入l文件

vue使用絕對路徑引入l文件

發布時間:2024-10-23 08:32:16

⑴ vue引入靜態文件

vue-cli3靜態資源配置

靜態資源可以通過兩種方式進行處理:

在JavaScript被導入或在template/CSS中通過相對路徑被引用。這類引用會被webpack處理。

放置在public目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝,而不會經過webpack的處理。

使用相對路徑引入的靜態資源文件,會被webpack處理解析為模塊依賴。例如,在imgsrc="./logo.png"和background:url(./logo.png),以及CSS@import"./logo.png"是相對的資源路徑。在vue2.x版本類似assets文件夾。

2.public文件夾

public文件夾下的文件並不會被Webpack處理:它們會直接被復制到最終的打包目錄(文件名需指定)下。必須使用絕對路徑引用這些文件,簡單說就是用來存放萬年不變的文件。

在vue2.x版本類似static/文件夾。

/public/logo.png

參考:

public/index.html文件是一個會被html-webpack-plugin處理的模板。構建中,各種資源路徑會被注入解析。可以使用lodashtemplate語法插入內容。

除了被html-webpack-plugin暴露的默認值之外,所有客戶端環境變數也可以直接使用。例如,BASE_URL的用法:

vue-cli3pubic靜態資源引入

靜態資源文件放入public文件夾下(類似cli2裡面的static文件夾),打包時不會被wenpack處理,輸出文件在dist文件夾下。

在index.html中通過

scriptsrc="%=BASE_URL%clipboard.min.js"/script

參考

linkrel="icon"href="%=BASE_URL%favicon.ico"

可以看到項目中ico圖標就是通過這種方式引入!!

public文件夾下文件是不被處理的,所以我們可以創建一個config.js文件

config.js

在index.html中引入

使用

遇到的問題,修改打包後的config.js文件,值不更新

排查方式:

1.先確認config.js文件是否更新,瀏覽器的緩存可能會影響

2.可以修改js文件名,比如加上hash值,config.hashxxx.js,在index.html引入的地方也要對應修改

綜上

本地測試ok

vue怎麼使用工具類中的static方法

vue怎麼使用工具類中的static方法

在Vue項目中使用工具類中的靜態方法,需要先引入該工具類文件,然後通過工具類名稱來調用靜態方法。

例如,有一個工具類文件utils.js,其中包含一個靜態方法formatDate:

```

exportdefaultclassUtils{

staticformatDate(date){

//somecodehere

}

}

```

在Vue組件中引入該工具類文件,並調用靜態方法formatDate:

```

template

div

p{{formattedDate}}/p

/div

/template

script

importUtilsfrom'@/utils.js'

exportdefault{

data(){

return{

date:newDate()

}

},

computed:{

formattedDate(){

returnUtils.formatDate(this.date)

}

}

}

/script

```

在該Vue組件中,我們首先引入了utils.js文件,並在computed屬性中定義了一個formattedDate計算屬性,該計算屬性調用了工具類Utils的靜態方法formatDate來格式化日期。

⑵ vue3 history模式下 子路由刷新引入文件找不到

在使用vue3做項目的時候 index.html文件引入的css 在子路由頁面刷新找不到文件

一直找不到 後來找了好多地方
修改為

吧絕對路徑的 ./ 修改成為 /

原理:

./ 是指用戶所在的當前目錄(相對路徑);

/ 是指根目錄(絕對路徑,項目根目錄),也就是項目根目錄;

對於hash模式,根路徑是固定的,就是項目的根目錄,但是history模式下,以 / 開頭的嵌套路徑會被當作根路徑,所以使用「./」引入文件,就會找不到文件了,因為文件本身就是在項目根目錄下的,並不在嵌套路徑這個目錄下。

總結,無論hash模式還是history模式,可以直接使用「/」從項目根目錄引入靜態文件。

https://www.cnblogs.com/bosslandy/p/8820939.html

閱讀全文

與vue使用絕對路徑引入l文件相關的資料

熱點內容
ps入門必備文件 瀏覽:348
以前的相親網站怎麼沒有了 瀏覽:15
蘋果6耳機聽歌有滋滋聲 瀏覽:768
怎麼徹底刪除linux文件 瀏覽:379
編程中字體的顏色是什麼意思 瀏覽:534
網站關鍵詞多少個字元 瀏覽:917
匯川am系列用什麼編程 瀏覽:41
筆記本win10我的電腦在哪裡打開攝像頭 瀏覽:827
醫院單位基本工資去哪個app查詢 瀏覽:18
css源碼應該用什麼文件 瀏覽:915
編程ts是什麼意思呢 瀏覽:509
c盤cad佔用空間的文件 瀏覽:89
不銹鋼大小頭模具如何編程 瀏覽:972
什麼格式的配置文件比較主流 瀏覽:984
增加目錄word 瀏覽:5
提取不相鄰兩列數據如何做圖表 瀏覽:45
r9s支持的網路制式 瀏覽:633
什麼是提交事務的編程 瀏覽:237
win10打字卡住 瀏覽:774
linux普通用戶關機 瀏覽:114

友情鏈接