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

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

例如

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

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

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

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

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

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

知識回顧：

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

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

這是通過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 鏈接來確定的

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

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

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

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

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

因為webpack使用的是 ` commenJS ` 規(guī)范，必須使用require才可以

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

webpack對其打包處理不一致。

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

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

因為webpack使用的是 ` 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、找到如下兩個目錄

2、對這兩個文件，進行同樣的修改

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

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

1、找到vue.config文件      

2、對這個文件進行修改

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

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

最新評論