靜態(tài)資源處理：
assets和static文件夾的區(qū)別
相信有很多人知道vue-cli有兩個(gè)放置靜態(tài)資源的地方，分別是src/assets文件夾和static文件夾,這兩者的區(qū)別很多人可能不太清楚交排。
assets目錄中的文件會(huì)被webpack處理解析為模塊依賴迈喉，只支持相對(duì)路徑形式尸曼。例如，在 <img src="./logo.png">
和 background: url(./logo.png)中常遂，”./logo.png” 是相對(duì)的資源路徑攒钳，將由Webpack解析為模塊依賴。
static/ 目錄下的文件并不會(huì)被Webpack處理：它們會(huì)直接被復(fù)制到最終的打包目錄（默認(rèn)是dist/static）下香浩。必須使用絕對(duì)路徑引用這些文件类缤，這是通過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。
任何放在 static/ 中文件需要以絕對(duì)路徑的形式引用：/static/[filename]邻吭。
在js數(shù)據(jù)中如何引用圖片
因?yàn)閣ebpack會(huì)將圖片當(dāng)做模塊來引用餐弱，所以在js中需要使用require將圖片引用進(jìn)來，不能直接以字符串的形式囱晴。
js部分：
data () {
return {
imgUrl: '圖片地址',//錯(cuò)誤寫法
imgUrl: require('圖片地址')//正確的寫法
}
}
template部分：
img標(biāo)簽形式：
<img :src="img" />
或者p背景圖形式：
<p :style="{backgroundImage: 'url(' + img + ')'}"></p>
webpack+vue自定義路徑別名
vue-cli 用的是webpack膏蚓，也可以使用webpack自定義別名這個(gè)功能，自定義別名這個(gè)功能當(dāng)你在多層文件夾嵌套的時(shí)候不必一層一層找路徑畸写，直接使用自定義別名就可以找到文件的位置驮瞧。
js部分：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static':path.resolve(__dirname, '../static'),//增加這一行代碼
}
}
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static':path.resolve(__dirname, '../static'),//增加這一行代碼
}
},
解讀：
這里給’static’賦予了一個(gè)地址，那么在程序中引入路徑的時(shí)候’~static’就直接可以代替路徑’../static’枯芬，親測(cè)论笔，這里就算多層嵌套也可以成功找到路徑采郎。
清理項(xiàng)目中沒用的插件
很多人像我一樣，剛開始的會(huì)安裝很多插件狂魔，然后最后在項(xiàng)目中并沒有用到蒜埋。那之前安裝的插件太多了，連自己都忘記了安裝了哪些插件最楷？
我們項(xiàng)目安裝的所有的模塊依賴都在這個(gè)pageage.json文件中整份，當(dāng)我們需要整理一波自己的依賴的時(shí)候，可以在這個(gè)文件里面找有沒有現(xiàn)在已經(jīng)沒用的依賴管嬉，可以使用命令行npm remove 模塊名字來刪除沒用的模塊皂林。
–save-dev和–save的區(qū)別
上面的這些依賴有些只在開發(fā)環(huán)境里面使用的模塊朗鸠，有的在項(xiàng)目上線之后還是要繼續(xù)依賴的模塊蚯撩。他們之間的區(qū)別就在于我們平時(shí)安裝模塊依賴時(shí)的：--save-dev和 --save
當(dāng)你使用--save-dev安裝依賴的時(shí)候就會(huì)放在package.json的devDependencies對(duì)象下面，相反的烛占，當(dāng)你使用--save安裝依賴的時(shí)候就會(huì)出現(xiàn)在dependencies對(duì)象下面胎挎。
總結(jié)：* –save-dev 是你開發(fā)時(shí)候依賴的東西，–save 是你發(fā)布之后還依賴的東西
