VueJS: HTML và Nội dung tĩnh

Khóa học qua video:

HTML

#Tệp chỉ mục

Tệp public/index.html là template sẽ được xử lý bằng plugin html-webpack. Trong quá trình xây dựng, liên kết nội dung sẽ được tự động chèn. Ngoài ra, Vue CLI cũng tự động chèn các gợi ý tài nguyên ( preload/prefetch), các biểu thức/biểu tượng liên kết (khi sử dụng plugin PWA) và các liên kết nội dung cho các tệp JavaScript và CSS được tạo trong quá trình xây dựng.

#Nội suy

Vì tệp chỉ mục được sử dụng làm template, bạn có thể sử dụng cú pháp template lodash để nội suy các giá trị trong đó:

<%= VALUE %> cho nội suy không thoát;
<%- VALUE %> cho nội suy thoát HTML;
<% expression %> cho luồng điều khiển JavaScript.

Ngoài các giá trị mặc định được hiển thị html-webpack-plugin , tất cả các biến env phía máy khách cũng có sẵn trực tiếp. Ví dụ: để sử dụng giá trị BASE_URL:

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

Xem thêm:

baseUrl

Tải trước

Theo mặc định, ứng dụng Vue CLI sẽ tự động tạo các gợi ý tải trước cho tất cả các tệp cần thiết để hiển thị ứng dụng ban đầu của bạn.

Các gợi ý được đưa vào bằng cách sử dụng @vue/preload-webpack-plugin và có thể được sửa đổi/xóa thông qua chainWebpack như config.plugin('preload').

Tìm nạp trước

Theo mặc định, ứng dụng Vue CLI sẽ tự động tạo các gợi ý tìm nạp trước cho tất cả các tệp JavaScript được tạo cho các khối không đồng bộ (do kết quả của việc chia tách mã theo yêu cầu thông qua import()).

Các gợi ý được đưa vào bằng cách sử dụng @vue/preload-webpack-plugin và có thể được sửa đổi/xóa thông qua chainWebpack như config.plugin('prefetch').

Thí dụ:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // remove the prefetch plugin
    config.plugins.delete('prefetch')

    // or:
    // modify its options:
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

Khi plugin tìm nạp trước bị tắt, bạn có thể chọn các khối cụ thể theo cách thủ công để tìm nạp trước bằng cách sử dụng comment inline của webpack:

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

Thời gian chạy của webpack sẽ chèn các liên kết tìm nạp trước khi đoạn cha được tải.

Gợi ý

Các liên kết tìm nạp trước sẽ tiêu tốn băng thông. Nếu bạn có một ứng dụng lớn với nhiều khối không đồng bộ và người dùng của bạn chủ yếu là thiết bị di động và do đó sẽ liên quan đến băng thông, bạn có thể muốn vô hiệu hóa các liên kết tìm nạp trước và chọn các phần theo cách thủ công để tìm nạp trước.

Vô hiệu hóa tạo chỉ mục

Khi sử dụng Vue CLI với backend hiện thời, bạn có thể cần phải vô hiệu hóa việc tạo ra index.html để các dữ liệu được tạo ra có thể được sử dụng trong một trang được máy chủ trả về. Để làm như vậy, bạn có thể thêm các thông tin sau vào vue.config.js:

// vue.config.js
module.exports = {
  // disable hashes in filenames
  filenameHashing: false,
  // delete HTML related webpack plugins
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

Tuy nhiên, điều này không thực sự được khuyến khích vì:

Tên tệp được mã hóa cứng khiến việc kiểm soát bộ nhớ cache hiệu quả trở nên khó khăn hơn.
Các tên tệp được mã hóa cứng cũng không hoạt động tốt với việc chia tách mã, tạo ra các tệp JavaScript bổ sung với các tên tệp khác nhau.
Tên tệp được mã hóa cứng không hoạt động với Chế độ hiện đại.

Thay vào đó, bạn nên xem xét sử dụng tùy chọn indexPath để sử dụng HTML được tạo dưới dạng khuôn mẫu khung nhìn trong khuôn khổ phía máy chủ của bạn.

#Xây dựng ứng dụng nhiều trang

Không phải mọi ứng dụng đều phải là SPA. Vue CLI hỗ trợ xây dựng ứng dụng nhiều trang bằng tùy chọn pages trong vue.config.js . Ứng dụng được xây dựng sẽ chia sẻ hiệu quả các phần phổ biến giữa nhiều mục để có hiệu suất tải tối ưu.

Xử lý nội dung tĩnh

Nội dung tĩnh có thể được xử lý theo hai cách khác nhau:

Được nhập bằng JavaScript hoặc được tham chiếu trong các template/CSS thông qua các đường dẫn tương đối. Các tham chiếu như vậy sẽ được xử lý bởi webpack.
Được đặt trong thư mục public và được tham chiếu qua đường dẫn tuyệt đối. Những nội dung này sẽ chỉ được sao chép và không đi qua webpack.

#Nhập đường dẫn tương đối

Khi bạn tham chiếu một nội dung tĩnh sử dụng đường dẫn tương đối (phải bắt đầu bằng .) bên trong JavaScript, CSS hoặc các tệp *.vue, thì nội dung sẽ được đưa vào biểu đồ phụ thuộc của webpack. Trong quá trình biên dịch này, tất cả các URL nội dung như <img src="...">, background: url(...) và CSS @import được giải quyết dưới dạng phụ thuộc của mô-đun.

Ví dụ, url(./image.png) sẽ được dịch sang require('./image.png'), và

<img src="./image.png">

sẽ được biên dịch thành:

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

Ở bên trong ta sử dụng file-loader để xác định vị trí tệp cuối cùng với băm phiên bản và đường dẫn cơ sở công khai chính xác và sử dụng nội dung url-loader có điều kiện nội tuyến nhỏ hơn 4kb, giảm số lượng yêu cầu HTTP.

Bạn có thể điều chỉnh giới hạn kích thước tệp nội tuyến thông qua chainWebpack. Ví dụ: để đặt giới hạn thành 10kb ta làm như sau:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

#Quy tắc chuyển đổi URL

Nếu URL là đường dẫn tuyệt đối (ví dụ /images/foo.png), URL sẽ được giữ nguyên.
Nếu URL bắt đầu bằng ., nó được hiểu là một yêu cầu mô đun tương đối và được giải quyết dựa trên cấu trúc thư mục trên hệ thống tệp của bạn.
Nếu URL bắt đầu bằng ~, mọi thứ sau khi nó được hiểu là một yêu cầu mô-đun. Điều này có nghĩa là bạn thậm chí có thể tham chiếu các nội dung bên trong các mô-đun nút:
```
<img src="~some-npm-package/foo.png">
```
Nếu URL bắt đầu bằng @, nó cũng được hiểu là một yêu cầu mô-đun. Điều này là hữu ích vì Vue CLI có bí danh mặc định là @ sẽ thành <projectRoot>/src. (chỉ dành cho template)

#Thư mục `public`

Bất kỳ nội dung tĩnh nào được đặt trong thư mục public sẽ chỉ được sao chép và không đi qua webpack. Bạn cần tham khảo chúng bằng cách sử dụng đường dẫn tuyệt đối.

Lưu ý, bạn nên nhập nội dung như một phần của biểu đồ phụ thuộc vào mô-đun để chúng sẽ đi qua webpack với các lợi ích sau:

Các tập lệnh và bảng định kiểu được rút gọn và nhóm lại với nhau để tránh các yêu cầu mạng bổ sung.
Thiếu tệp gây ra lỗi biên dịch thay vì lỗi 404 cho người dùng.
Tên tệp kết quả bao gồm các nội dung băm, do đó bạn không cần phải lo lắng về các trình duyệt lưu trữ các phiên bản cũ của chúng.

Thư mục public được cung cấp dưới dạng một escape hatch, và khi bạn tham khảo nó qua đường dẫn tuyệt đối, bạn cần tính đến nơi ứng dụng của bạn sẽ được triển khai. Nếu ứng dụng của bạn không được triển khai tại thư mục gốc của domain, bạn sẽ cần phải thêm tiền tố URL của bạn bằng baseUrl:

Trong public/index.html hoặc các tệp HTML khác được sử dụng làm template html-webpack-plugin, bạn cần thêm tiền tố vào liên kết với <%= BASE_URL %>:
```
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
```
Trong các template, trước tiên bạn sẽ cần phải chuyển URL cơ sở đến thành phần của mình:
```
data () {
  return {
    baseUrl: process.env.BASE_URL
  }
}
```
Sau đó:
```
<img :src="`${baseUrl}my-image.png`">
```

Khi nào thì sử dụng thư mục `public`

Bạn cần một tệp có tên cụ thể trong build output.
Bạn có hàng nghìn hình ảnh và cần tham chiếu động các đường dẫn của chúng.
Một số thư viện có thể không tương thích với Webpack và bạn không có tùy chọn nào khác ngoài việc đưa nó vào làm thẻ <script>.

» Tiếp: Làm việc với CSS

« Trước: Khả năng tương thích trình duyệt

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên