轉自：vue-cli中自定義路徑別名 assets和static文件夾的區別
靜態資源處理：
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將圖片引用進來，不能直接以字符串的形式。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
js部分：
data () {
return
{
imgUrl:
'圖片地址'
,
//錯誤寫法
imgUrl: require(
'圖片地址'
)
//正確的寫法
}
}
template部分：
img標簽形式：
<img :src=
"img"
/>
或者p背景圖形式：
<p :style=
"{backgroundImage: 'url(' + img + ')'}"
></p>
|
說了圖片就正好再提一下vue-cli的一個圖片有關的配置，下圖這個配置的意思是：在10000b 的圖片以下進行base64轉換，所以如果項目中有些比較小的icon就不用再進行圖片精靈的處理了
webpack+vue自定義路徑別名
vue-cli 用的是webpack，也可以使用webpack自定義別名這個功能，自定義別名這個功能當你在多層文件夾嵌套的時候不必一層一層找路徑，直接使用自定義別名就可以找到文件的位置。
設置方法：
**設置地址：**build文件夾下面的webpack.base.conf.js文件
具體設置：
|
1
2
3
4
5
6
7
8
|
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 是你發布之后還依賴的東西。*