Vue3.0靜態(tài)文件存放路徑與引用

一般項(xiàng)目的靜態(tài)文件都放到static文件夾中，在3.0版本中static文件夾不能與src文件同級(jí)，一般都需要放在public文件目錄下，引用路徑也不太相同

例如

• 2.0直接放到static文件中那么路徑為 /static/img/headbg05.jpg（注意這個(gè)是放在src同級(jí)目錄下）
• 3.0就需要放到public文件中

我們將static文件拉入public下，訪問(wèn)路徑依舊是 /static/img/headbg05.jpg

注意：（cli2有寫靜態(tài)資源文件夾名字static，cli3.x不寫靜態(tài)資源文件夾名字！??！(名字為public)）

vue2.0/vue3.0 添加靜態(tài)文件

一、說(shuō)明：為什么要添加靜態(tài)文件？

在vue2.0/vue3.0中添加如同static的靜態(tài)文件，目的是讓其在webpack中不進(jìn)行打包，可以隨意改動(dòng)其中的配置文件內(nèi)容。

知識(shí)回顧：

1、什么是static，什么文件放在static中？

答：存放靜態(tài)資源，webpack打包是不會(huì)對(duì)static文件夾中資源進(jìn)行打包，只是復(fù)制一份（默認(rèn)是 dist/static ），必須使用絕對(duì)路徑來(lái)引用這些文件。所有建議放一些外部第三方。

這是通過(guò)在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 鏈接來(lái)確定的

注意：任何放在 static 中的文件需要以絕對(duì)路徑的形式引用：/static/[filename]

2、什么是asset，什么文件放在asset中？

答：assets下面的資源，在js中使用的話，路徑要經(jīng)過(guò)webpack中的file-loader編譯，所有webpack會(huì)對(duì)其進(jìn)行打包處理，則路徑不能直接寫。所以建議自己的文件放在assets中。

3、若把圖片放在assets和static中，html頁(yè)面中都可以使用；

但是在動(dòng)態(tài)綁定中，assets路徑的圖片會(huì)加載失敗，

因?yàn)閣ebpack使用的是 ` commenJS ` 規(guī)范，必須使用require才可以

4、static與asset的區(qū)別是什么？

webpack對(duì)其打包處理不一致。

若把圖片放在assets和static中，html頁(yè)面中都可以使用；

但是在動(dòng)態(tài)綁定中，assets路徑的圖片會(huì)加載失敗，

因?yàn)閣ebpack使用的是 ` commenJS ` 規(guī)范，必須使用require才可以。

比如： 

 
export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

二、使用技術(shù)

CopyWebpackPlugin 拷貝插件

三、vue2.0中添加靜態(tài)文件public  

1、找到如下兩個(gè)目錄

2、對(duì)這兩個(gè)文件，進(jìn)行同樣的修改

3、重新啟動(dòng)項(xiàng)目，則靜態(tài)文件public就生效了，打包后顯示目錄如下

四、vue3.0中添加靜態(tài)文件public      

1、找到vue.config文件      

2、對(duì)這個(gè)文件進(jìn)行修改

3、重啟項(xiàng)目后，靜態(tài)文件夾public就生效

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論