? ? ? ?全局cli配置：vue.config.js

????????之前寫項目就想著怎么簡單怎么來，圖片要用了，就直接在要用圖片的頁面，新建一個跟頁面同等級的?imgs 文件夾，然后在頁面中直接 “./imgs/圖片.png”，不得不說這樣寫很方便。

但是這樣做顯得不太高級，而且圖片太多的時候，可能會重復添加到項目中。vue-cli3 里面有兩個可以存放圖片的位置：public、assets，這兩個的區別一直分得不是很清楚，今天就整理疏通一下，將了解下面3點：

兩者存放什么圖片，什么時候使用，在某種情況下應該使用哪種方式；

使用方式；

圖片路徑轉換；

在了解上面幾點之前，先來看看官網的介紹：

一、處理靜態資源

靜態資源可以通過兩種方式進行處理：

在 JavaScript 被導入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。

放置在?public?目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過 webpack 的處理。

????????第一種方式：例如在某個 .vue 文件中通過 import "./" 的方法引入某個組件、js方法，或者像我之前在項目中寫的 “./imgs/圖片.png”，這就是采用相對路徑引用資源的方法。

????????第二種方式：例如在 public/index.html 中 <link?rel="icon"?href="<%=?BASE_URL?%>favicon.ico"> 通過?<%=?BASE_URL?%> 引用 favicon.icon，這是絕對路徑。

????????兩種方式簡單來說，一種是相對路徑引用靜態資源（會被webpack處理），一種是采用絕對路徑引用資源（不會被webpack處理）。【這里的資源不局限于圖片，還有js、css等都可以屬于靜態資源】

1.1?相對路徑引用/導入資源

????????當你在 JavaScript、CSS 或?*.vue?文件中使用相對路徑 (必須以?.?開頭) 引用一個靜態資源時，該資源將會被包含進入 webpack 的依賴圖中。在其編譯過程中，所有諸如?<img src="...">、background: url(...)?和 CSS?@import?的資源 URL?都會被解析為一個模塊依賴。

根據上面官方的講解，大概情形在項目中的展示情況：

1.1.1 通過靜態路徑導入資源時，例如導入圖片，我們在模板中使用，需要通過 require?的這種方法去引入：

<img :src="logo" />export default {data(){return {//相對路徑不一定都是./，也可能是../，按照圖片存放位置來決定logo: require("./imgs/logo.png") }} }

1.1.2?在寫背景圖樣式的時候，就可以像普通 H5 頁面一樣直接引入：?

<template><div><div class="login"></div></div> </template><style scoped lang="scss">.login{background: url("./imgs/login.png") no-repeat center;} </style>

1.1.3 若是引入動態背景圖，寫法與1相似

<template><div><div class="login" :style="{backgroundImg: url(loginImg)}"></div></div> </template><script>export default{data(){return {loginImg: require('./imgs/login.png')}}} </script><style scoped lang="scss">.login{background-repeat: no-repeat; background-size:100%;} </style>

---

二、URL轉換規則

如果 URL 是一個絕對路徑 (例如?/images/foo.png)，它將會被保留不變。

如果 URL 以?.?開頭，它會作為一個相對模塊請求被解釋且基于你的文件系統中的目錄結構進行解析。

如果 URL 以?~?開頭，其后的任何內容都會作為一個模塊請求被解析。這意味著你甚至可以引用 Node 模塊中的資源：

<img src="~some-npm-package/foo.png">

如果 URL 以?@?開頭，它也會作為一個模塊請求被解析。它的用處在于 Vue CLI 默認會設置一個指向?<projectRoot>/src?的別名?@。(僅作用于模版中)

三、關于public

3.1 public?文件夾

任何放置在?public?文件夾的靜態資源都會被簡單的復制，而不經過 webpack。你需要通過絕對路徑來引用它們。

注意我們推薦將資源作為你的模塊依賴圖的一部分導入，這樣它們會通過 webpack 的處理并獲得如下好處：

• 腳本和樣式表會被壓縮且打包在一起，從而避免額外的網絡請求。
• 文件丟失會直接在編譯時報錯，而不是到了用戶端才產生 404 錯誤。
• 最終生成的文件名包含了內容哈希，因此你不必擔心瀏覽器會緩存它們的老版本。

public?目錄提供的是一個應急手段，當你通過絕對路徑引用它時，留意應用將會部署到哪里。如果你的應用沒有部署在域名的根部，那么你需要為你的 URL 配置?publicPath?前綴：

• 在?public/index.html?或其它通過?html-webpack-plugin?用作模板的 HTML 文件中，你需要通過?<%= BASE_URL %>?設置鏈接前綴：

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

• 在模板中，你首先需要向你的組件傳入基礎 URL：

  data () {return {publicPath: process.env.BASE_URL} }

  然后：

  <img :src="`${publicPath}my-image.png`">

3.2?何時使用?public?文件夾

• 你需要在構建輸出中指定一個文件的名字。
• 你有上千個圖片，需要動態引用它們的路徑。
• 有些庫可能和 webpack 不兼容，這時你除了將其用一個獨立的?<script>?標簽引入沒有別的選擇。

---

上面官方說的大部分都是 public 的內容。

四、總結

public放不會變動的文件（相當于vue-cli2.x中的static）
public/ 目錄下的文件并不會被Webpack處理：它們會直接被復制到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這個取決于你vue.config.js中 publicPath 的配置，默認的是/。

assets放可能會變動的文件
assets目錄中的文件會被webpack處理解析為模塊依賴，只支持相對路徑形式。

簡單來說就是就是public放別人家js文件（也就是不會變動），assets放自己寫的js、css文件（需要改動的文件）

?

推薦一篇文，個人認為很實用：

Vue處理靜態資源：public、assets目錄 - vickylinj - 博客園前言: webpack中的require解析 首先明確一點，在項目中的webpack.config.js等項目配置文件中使用的require屬于nodejs范疇，而進入index.js后，加載的組件中https://www.cnblogs.com/vickylinj/p/15599154.html

vue項目引入背景圖報Module not found: Error: Can't resolve './src/assets/theme/logo_blue.png' in'xxx'錯誤

總結

以上是生活随笔為你收集整理的vue 图片资源应该如何存放并引入（public、assets）？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。