HTML

public/index.html 文件是一個(gè)會(huì)被 html-webpack-plugin 處理的模板。構(gòu)建中，各種資源路徑會(huì)被注入解析。可以使用 lodash template 語(yǔ)法插入內(nèi)容。

用來(lái)做不轉(zhuǎn)義插值；

用來(lái)做 HTML 轉(zhuǎn)義插值；

用來(lái)描述 JavaScript 流程控制。

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

Preload和Prefetch

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

頁(yè)面加載完成后，利用空閑時(shí)間提前加載。

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

// vue.config.js

module.exports = {

chainWebpack: config => {

// 移除 prefetch 插件

config.plugins.delete('prefetch')

// 或者

// 修改它的選項(xiàng)：

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

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

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

return options

})

}

}

處理靜態(tài)資源

靜態(tài)資源可以通過兩種方式進(jìn)行處理：

在 JavaScript 被導(dǎo)入或在 template/CSS 中通過相對(duì)路徑被引用。這類引用會(huì)被 webpack 處理。

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

相對(duì)路徑

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

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

將會(huì)被編譯到：

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

在其內(nèi)部，我們通過 file-loader 用版本哈希值和正確的公共基礎(chǔ)路徑來(lái)決定最終的文件路徑，再用 url-loader 將小于 4kb 的資源內(nèi)聯(lián)，以減少 HTTP 請(qǐng)求的數(shù)量。

你可以通過 chainWebpack 調(diào)整內(nèi)聯(lián)文件的大小限制。例如，下列代碼會(huì)將其限制設(shè)置為 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 轉(zhuǎn)換規(guī)則

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

以 . 開頭，它會(huì)作為一個(gè)相對(duì)模塊請(qǐng)求被解釋且基于你的文件系統(tǒng)中的目錄結(jié)構(gòu)進(jìn)行解析。

以 ~ 開頭，其后的任何內(nèi)容都會(huì)作為一個(gè)模塊請(qǐng)求被解析。這意味著你甚至可以引用 Node 模塊中的資源。

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

public 文件夾

任何放置在 public 文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制，而不經(jīng)過 webpack。你需要通過絕對(duì)路徑來(lái)引用它們。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。