目錄
- linux查詢dist目錄
- 整體解釋
- 子目錄文件解釋
- CSS
- FONTS
- JS
linux查詢dist目錄
root@hcss-ecs-7881:/www/java_project/dist# ls -l
total 3004
drwxr-xr-x 2 root root 4096 Dec 31 10:15 css
-rw-r--r-- 1 root root 4286 Dec 31 10:15 favicon.ico
drwxr-xr-x 2 root root 4096 Dec 31 10:15 fonts
drwxr-xr-x 2 root root 4096 Dec 31 10:15 img
-rw-r--r-- 1 root root 883 Dec 31 10:15 index.html
drwxr-xr-x 2 root root 4096 Dec 31 10:15 js
-rw-r--r-- 1 root root 3044790 Dec 31 10:15 kwan.png整體解釋
在一個典型的 Vue 項目中，dist 目錄通常是用于存放經過構建和打包后的靜態資源，用于部署到生產環境的目錄。下面是對 dist 目錄下的結構進行解釋：
-
css/: 存放經過處理和壓縮后的 CSS 文件，這些文件包含了項目中所有樣式的定義。 -
favicon.ico: 網站的圖標文件，通常在瀏覽器標簽頁上顯示。 -
fonts/: 存放字體文件，用于項目中自定義的字體。 -
img/: 存放項目中使用到的圖片文件。 -
index.html: 項目的入口 HTML 文件，是前端應用的主頁面。 -
js/: 存放經過處理和壓縮后的 JavaScript 文件，這些文件包含了項目中所有邏輯的定義。 -
kwan.png: 一個示例圖片，可能是項目中使用到的一張圖片。
至于 Vue 項目的代碼本身，實際上是在開發階段的源代碼目錄中，通常在 src/ 目錄下。在開發過程中，你會在 src/ 目錄下編寫 Vue 組件、JavaScript 邏輯等源代碼文件。這些源代碼文件會通過構建工具（比如 Vue CLI）進行打包和編譯，最終生成的靜態資源文件就會被輸出到 dist/ 目錄中，用于部署到生產環境。
子目錄文件解釋
CSS
root@hcss-ecs-7881:/www/java_project/dist/css# ls -l
total 360
-rw-r--r-- 1 root root 152386 Dec 31 10:15 app.c024f9ad.css
-rw-r--r-- 1 root root 211481 Dec 31 10:15 chunk-vendors.0bfa23eb.css
在這個 css/ 目錄下，存放的是經過處理和壓縮后的 CSS 文件，這些文件是從項目的源代碼中提取、合并和壓縮而來的。具體來說：
-
app.c024f9ad.css: 這是項目的主 CSS 文件，通常包含了整個應用的樣式定義。它可能包含了從各個 Vue 組件、CSS 文件中提取出來的樣式，并經過一定的處理和優化后生成的。 -
chunk-vendors.0bfa23eb.css: 這是第三方依賴庫（如 Vue、Vuex、Vue Router 等）的樣式文件。在 Vue 項目中，通常會將第三方庫的樣式與應用自身的樣式分開打包，以便更好地利用瀏覽器的緩存機制，并降低加載時間。
這些 CSS 文件是經過處理和壓縮的，以減小文件大小并提高加載速度。在部署到生產環境時，這些文件會被服務器直接提供給用戶，用于渲染網站的樣式。
FONTS
root@hcss-ecs-7881:/www/java_project/dist/fonts# ls -l
total 84
-rw-r--r-- 1 root root 28200 Dec 31 10:15 element-icons.535877f5.woff
-rw-r--r-- 1 root root 55956 Dec 31 10:15 element-icons.732389de.ttf在 fonts/ 目錄下，存放的是項目中使用的字體文件。具體來說：
-
element-icons.535877f5.woff: 這是一個字體文件，通常用于顯示項目中的圖標，比如一些 UI 框架（如 Element UI）會使用自定義的字體圖標來展示按鈕、菜單等元素。.woff是 Web Open Font Format 的縮寫，是一種用于網頁的字體文件格式。 -
element-icons.732389de.ttf: 同樣是字體文件，但是采用的是 TrueType 格式（.ttf），也是用于在網頁中顯示圖標的字體文件。
這些字體文件通常被用于替代傳統的圖片圖標，可以更好地適應不同分辨率的屏幕，并且可以通過 CSS 控制顏色、大小等樣式，具有一定的靈活性。
JS
root@hcss-ecs-7881:/www/java_project/dist/js# ls -l
total 5888
-rw-r--r-- 1 root root 164397 Dec 31 10:15 app.549e91e9.js
-rw-r--r-- 1 root root 464525 Dec 31 10:15 app.549e91e9.js.map
-rw-r--r-- 1 root root 1006979 Dec 31 10:15 chunk-vendors.533b9d47.js
-rw-r--r-- 1 root root 4386109 Dec 31 10:15 chunk-vendors.533b9d47.js.map在 js/ 目錄下，存放的是經過打包和處理后的 JavaScript 文件，這些文件包含了項目的邏輯代碼。具體來說：
-
app.549e91e9.js: 這是項目的主 JavaScript 文件，包含了應用的主要邏輯代碼。它可能包含了各個 Vue 組件的 JavaScript 代碼，以及路由、狀態管理等相關邏輯。 -
app.549e91e9.js.map: 這是 JavaScript 文件的源代碼映射文件。它通常用于開發者調試，可以將壓縮后的 JavaScript 文件還原為源代碼，以方便在瀏覽器開發者工具中進行調試。 -
chunk-vendors.533b9d47.js: 這是第三方依賴庫（如 Vue、Vuex、Vue Router 等）的 JavaScript 文件，被打包成一個單獨的文件。這樣做可以提高緩存命中率和加載效率。 -
chunk-vendors.533b9d47.js.map: 同樣是 JavaScript 文件的源代碼映射文件，用于調試第三方依賴庫的 JavaScript 代碼。
這些 JavaScript 文件經過打包、壓縮和優化處理，用于在瀏覽器中運行項目的前端邏輯。在部署到生產環境時，這些文件會被服務器提供給用戶，用于執行前端應用的邏輯代碼。
