HTML

public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。構建中，各種資源路徑會被注入解析。可以使用 lodash template 語法插入內容。

用來做不轉義插值；

用來做 HTML 轉義插值；

用來描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默認值之外，所有客戶端環境變量也可以直接使用。例如，BASE_URL 的用法：

Preload和Prefetch

頁面加載的過程中，在瀏覽器開始主體渲染之前加載

頁面加載完成后，利用空閑時間提前加載。

這些屬性會被 @vue/preload-webpack-plugin 注入，并且可以通過 chainWebpack 的 config.plugin('preload/prefetch') 進行修改和刪除。

// vue.config.js

module.exports = {

chainWebpack: config => {

// 移除 prefetch 插件

config.plugins.delete('prefetch')

// 或者

// 修改它的選項：

config.plugin('prefetch').tap(options => {

options[0].fileBlacklist = options[0].fileBlacklist || []

options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)

return options

})

}

}

處理靜態資源

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

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

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

相對路徑

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

例如，url(./image.png) 會被翻譯為 require('./image.png')，而：

將會被編譯到：

h('img', { attrs: { src: require('./image.png') }})

在其內部，我們通過 file-loader 用版本哈希值和正確的公共基礎路徑來決定最終的文件路徑，再用 url-loader 將小于 4kb 的資源內聯，以減少 HTTP 請求的數量。

你可以通過 chainWebpack 調整內聯文件的大小限制。例如，下列代碼會將其限制設置為 10kb：

// vue.config.js

module.exports = {

chainWebpack: config => {

config.module

.rule('images')

.use('url-loader')

.loader('url-loader')

.tap(options => Object.assign(options, { limit: 10240 }))

}

}

URL 轉換規則

絕對路徑 (例如 /images/foo.png)，將會被保留不變。

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

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

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

public 文件夾

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

總結

以上是生活随笔為你收集整理的vue 转为静态html,Vue CLI 3使用：HTML和静态资源（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

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