建站
咨詢
售后
建站咨詢
新聞中心
HTML
Index 文件
public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。在構(gòu)建過程中，資源鏈接會被自動注入。另外，Vue CLI 也會自動注入 resource hint (preload/prefetch、manifest 和圖標鏈接 (當用到 PWA 插件時) 以及構(gòu)建過程中處理的 JavaScript 和 CSS 文件的資源鏈接。
成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的牟定網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
插值
因為 index 文件被用作模板，所以你可以使用 lodash template 語法插入內(nèi)容：
- <%= VALUE %> 用來做不轉(zhuǎn)義插值；
- <%- VALUE %> 用來做 HTML 轉(zhuǎn)義插值；
- <% expression %> 用來描述 JavaScript 流程控制。
除了被 html-webpack-plugin 暴露的默認值之外，所有客戶端環(huán)境變量也可以直接使用。例如，BASE_URL 的用法：
更多內(nèi)容可以查閱：
- publicPath
Preload
是一種 resource hint，用來指定頁面加載后很快會被用到的資源，所以在頁面加載的過程中，我們希望在瀏覽器開始主體渲染之前盡早 preload。
默認情況下，一個 Vue CLI 應(yīng)用會為所有初始化渲染需要的文件自動生成 preload 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，并且可以通過 chainWebpack 的 config.plugin('preload') 進行修改和刪除。
Prefetch
是一種 resource hint，用來告訴瀏覽器在頁面加載完成后，利用空閑時間提前獲取用戶未來可能會訪問的內(nèi)容。
默認情況下，一個 Vue CLI 應(yīng)用會為所有作為 async chunk 生成的 JavaScript 文件 (通過動態(tài) import() 按需 code splitting 的產(chǎn)物) 自動生成 prefetch 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，并且可以通過 chainWebpack 的 config.plugin('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
})
}
}
當 prefetch 插件被禁用時，你可以通過 webpack 的內(nèi)聯(lián)注釋手動選定要提前獲取的代碼區(qū)塊：
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
webpack 的運行時會在父級區(qū)塊被加載之后注入 prefetch 鏈接。
提示
Prefetch 鏈接將會消耗帶寬。如果你的應(yīng)用很大且有很多 async chunk，而用戶主要使用的是對帶寬較敏感的移動端，那么你可能需要關(guān)掉 prefetch 鏈接并手動選擇要提前獲取的代碼區(qū)塊。
不生成 index
當基于已有的后端使用 Vue CLI 時，你可能不需要生成 index.html，這樣生成的資源可以用于一個服務(wù)端渲染的頁面。這時可以向 vue.config.js 加入下列代碼：
// vue.config.js
module.exports = {
// 去掉文件名中的 hash
filenameHashing: false,
// 刪除 HTML 相關(guān)的 webpack 插件
chainWebpack: config => {
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
}
}
然而這樣做并不是很推薦，因為：
- 硬編碼的文件名不利于實現(xiàn)高效率的緩存控制。
- 硬編碼的文件名也無法很好的進行 code-splitting (代碼分段)，因為無法用變化的文件名生成額外的 JavaScript 文件。
- 硬編碼的文件名無法在現(xiàn)代模式下工作。
你應(yīng)該考慮換用 indexPath 選項將生成的 HTML 用作一個服務(wù)端框架的視圖模板。
構(gòu)建一個多頁應(yīng)用
不是每個應(yīng)用都需要是一個單頁應(yīng)用。Vue CLI 支持使用 vue.config.js 中的 pages 選項構(gòu)建一個多頁面的應(yīng)用。構(gòu)建好的應(yīng)用將會在不同的入口之間高效共享通用的 chunk 以獲得最佳的加載性能。
處理靜態(tài)資源
靜態(tài)資源可以通過兩種方式進行處理：
- 在 JavaScript 被導入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。
- 放置在 public 目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經(jīng)過 webpack 的處理。
從相對路徑導入
當你在 JavaScript、CSS 或 *.vue 文件中使用相對路徑 (必須以 . 開頭) 引用一個靜態(tài)資源時，該資源將會被包含進入 webpack 的依賴圖中。在其編譯過程中，所有諸如 、background: url(...) 和 CSS @import 的資源 URL 都會被解析為一個模塊依賴。
例如，url(./image.png) 會被翻譯為 require('./image.png')，而：
將會被編譯到：
h('img', { attrs: { src: require('./image.png') }})
在其內(nèi)部，我們通過 file-loader 用版本哈希值和正確的公共基礎(chǔ)路徑來決定最終的文件路徑，再用 url-loader 將小于 4kb 的資源內(nèi)聯(lián)，以減少 HTTP 請求的數(shù)量。
你可以通過 chainWebpack 調(diào)整內(nèi)聯(lián)文件的大小限制。例如，下列代碼會將其限制設(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ī)則
- 如果 URL 是一個絕對路徑 (例如 /images/foo.png)，它將會被保留不變。
- 如果 URL 以 . 開頭，它會作為一個相對模塊請求被解釋且基于你的文件系統(tǒng)中的目錄結(jié)構(gòu)進行解析。
- 如果 URL 以 ~ 開頭，其后的任何內(nèi)容都會作為一個模塊請求被解析。這意味著你甚至可以引用 Node 模塊中的資源：
- 如果 URL 以 @ 開頭，它也會作為一個模塊請求被解析。它的用處在于 Vue CLI 默認會設(shè)置一個指向
/src 的別名 @。(僅作用于模版中)
public 文件夾
任何放置在 public 文件夾的靜態(tài)資源都會被簡單的復制，而不經(jīng)過 webpack。你需要通過絕對路徑來引用它們。
注意我們推薦將資源作為你的模塊依賴圖的一部分導入，這樣它們會通過 webpack 的處理并獲得如下好處：
- 腳本和樣式表會被壓縮且打包在一起，從而避免額外的網(wǎng)絡(luò)請求。
- 文件丟失會直接在編譯時報錯，而不是到了用戶端才產(chǎn)生 404 錯誤。
- 最終生成的文件名包含了內(nèi)容哈希，因此你不必擔心瀏覽器會緩存它們的老版本。
public 目錄提供的是一個應(yīng)急手段，當你通過絕對路徑引用它時，留意應(yīng)用將會部署到哪里。如果你的應(yīng)用沒有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴：
- 在 public/index.html 或其它通過 html-webpack-plugin 用作模板的 HTML 文件中，你需要通過 <%= BASE_URL %> 設(shè)置鏈接前綴：
- 在模板中，你首先需要向你的組件傳入基礎(chǔ) URL：data () { return { publicPath: process.env.BASE_URL } } 然后：
何時使用 public 文件夾
- 你需要在構(gòu)建輸出中指定一個文件的名字。
- 你有上千個圖片，需要動態(tài)引用它們的路徑。
- 有些庫可能和 webpack 不兼容，這時你除了將其用一個獨立的