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

寫在前面：

這是一篇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