vue-cli 自定義路徑別名 assets和static資料夾的區別 --save-dev和--save的區別

OBKoro1發表於2017-09-19
Vuedev

寫在前面：

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

靜態資源處理：

assets和static資料夾的區別

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

assets目錄中的檔案會被webpack處理解析為模組依賴，只支援相對路徑形式。例如，在 <img src="./logo.png">
和 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="img" />
或者div背景圖形式：
<div :style="{backgroundImage: 'url(' + img + ')'}"></div>複製程式碼

說了圖片就正好再提一下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

後話

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

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
掘金個人主頁

以上2017.9.18

相關文章