vue-cli中自訂路徑別名 assets和static資料夾的區別

寫在前面：

這是一篇vue-cli的幾個小知識點簡單介紹，適用於剛接觸vue-cli腳手架以及對此方面並不太了解的同學，大佬們繞道。有需要的朋友可以做一下參考，喜歡的可以點波贊，或是關註一下，希望可以幫到大家。

靜態資源處理：

assets和static資料夾的差異

#相信有很多人知道vue-cli有兩個放置靜態資源的地方，分別是src/assets資料夾和static資料夾,這兩者的區別很多人可能不太清楚。

assets目錄中的檔案會被webpack處理解析為模組依賴，只支援相對路徑形式。例如，在<img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" alt="vue-cli中自訂路徑別名 assets和static資料夾的區別" >
和background: url(./logo.png)中，」./logo. png” 是相對的資源路徑，將由Webpack解析為模組依賴。

static/ 目錄下的檔案並不會被Webpack處理：它們會直接被複製到最終的打包目錄（預設是dist/static）下。 必須使用絕對路徑來引用這些文件，這是透過在 config.js 檔案中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。

任何放在 static/ 中檔案需要以絕對路徑的形式參考：/static/[filename]。

在我們實際的開發中，總的來說：static放置不會變動的檔案 assets放置可能會變動的檔案。

在js資料中如何引用圖片

因為webpack會將圖片當做模組來引用，所以在js中需要使用require將圖片引用進來，不能直接以字串的形式。

js部分：
    data () {
        return {
             imgUrl: '图片地址',//错误写法 
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分：
img标签形式：
<img  src="/static/imghw/default1.png"  data-src="img"  class="lazy"  : / alt="vue-cli中自訂路徑別名 assets和static資料夾的區別" >
或者p背景图形式：
<p :style="{backgroundImage: &#39;url(&#39; + img + &#39;)&#39;}"></p>

說了圖片就正好再提一下vue-cli的一個圖片有關的配置，下圖這個配置的意思是：在10000b 的圖片以下進行base64轉換，所以如果項目中有些比較小的icon就不用再進行圖片精靈的處理了

webpack+vue自訂路徑別名

vue-cli 用的是webpack，也可以使用webpack自訂別名這個功能，自訂別名這個功能當你在多層資料夾嵌套的時候不必一層一層找路徑，直接使用自訂別名就可以找到檔案的位置。

設定方法：

**設定位址：**build資料夾下面的webpack.base.conf.js檔案
具體設定：

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

使用方式：

使用的時候要像下方截圖的B處一樣前面要加上一個'~'，這裡的webstorm雖然提示報錯，我們可以不用管，程式碼運作是正常的。

解讀：

這裡給'static'給了一個位址，那麼在程式中引入路徑的時候'~static'就直接可以取代路徑'.. /static'，親測，這裡就算多層嵌套也可以成功找到路徑。

清理專案中沒用的插件

很多人跟我一樣，剛開始的會安裝很多插件，然後最後在專案中並沒有用到。那之前安裝的插件太多了，連自己都忘了安裝哪些插件？

package.json

在上圖所示位置，我們專案安裝的所有的模組依賴都在這個pageage.json檔案中，當我們需要整理一波自己的依賴的時候，可以在這個檔案裡面找有沒有現在已經沒用的依賴，可以使用命令列npm remove 模組名字來刪除沒用的模組。

–save-dev和–save的區別

上面的這些依賴有些只在開發環境裡面使用的模組，有的在專案上線之後還是要繼續依賴的模組。他們之間的差異就在於我們平時安裝模組依賴時的：--save-dev和--save

當你使用-- save-dev安裝依賴的時候就會放在package.json的devDependencies物件下面，相反的，當你使用--save安裝依賴的時候就會出現在dependencies物件下面。

總結：* –save-dev 是你開發時候要依賴的東西，–save 是你發布之後還依賴的東西。 *

關於vue-cli配置之前也寫過兩篇文章，需要的同學可以看一下：

手摸手教你使用vue-cli腳手架

在vue-cli 腳手架中引用jQuery、bootstrap 以及使用sass、less 寫css

後話

以上就是這篇文章的內容了，是自己一段時間實踐專案的一些小積累，後續還有一些內容，因為專案比較緊，可能會晚點跟大家見面。

#

以上是vue-cli中自訂路徑別名 assets和static資料夾的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！