VueJS: Xây dựng mục tiêu

Khi bạn chạy vue-cli-service build, bạn có thể chỉ định các mục tiêu xây dựng khác nhau thông qua tùy chọn --target. Điều này cho phép bạn sử dụng cùng một cơ sở mã để tạo các bản dựng khác nhau cho các trường hợp sử dụng khác nhau.

App

Ứng dụng là mục tiêu xây dựng mặc định. Ở chế độ này:

• index.html với việc đưa vào nội dung và tài nguyên
• thư viện của nhà cung cấp được chia thành một đoạn riêng biệt để lưu bộ nhớ cache tốt hơn
• nội dung tĩnh dưới 4kb được lưu vết vào JavaScript
• nội dung tĩnh public được sao chép vào thư mục output

#Library

Bạn có thể xây dựng một mục duy nhất làm thư viện bằng

vue-cli-service build --target lib --name myLib [entry]

File                     Size                     Gzipped

dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb

Mục nhập có thể là một tệp .js hoặc một tệp .vue. Nếu không có mục nào được chỉ định, src/App.vue sẽ được sử dụng.

Một kết quả đầu ra xây dựng lib:

• dist/myLib.common.js: Gói CommonJS để tiêu thụ thông qua trình cắm (không may, webpack hiện không hỗ trợ định dạng đầu ra của mô-đun ES cho các gói)

• dist/myLib.umd.js: Gói UMD để tiêu thụ trực tiếp trong trình duyệt hoặc với trình tải AMD

• dist/myLib.umd.min.js: Phiên bản được rút gọn của bản dựng UMD.

• dist/myLib.css: Tệp CSS được trích xuất (có thể được móc vào inline CSS bằng cách đặt css: { extract: false }trong vue.config.js)

#Vue so với tệp đầu vào JS/TS

Khi sử dụng tệp .vue như mục nhập, thư viện của bạn sẽ trực tiếp chỉ ra component Vue, vì component luôn mặc định là export.

Tuy nhiên, khi bạn đang sử dụng một tập tin .js hoặc .ts là mục nhập của bạn, nó có thể chứa các xuất khẩu có tên, do đó thư viện của bạn sẽ được hiển thị dưới dạng một Mô-đun. Điều này có nghĩa là việc xuất thư viện mặc định của bạn phải được truy cập như window.yourLib.default trong các bản dựng UMD, hoặc như const myLib = require('mylib').default trong các bản dựng CommonJS. Nếu bạn không có bất kỳ export có tên nào và muốn hiển thị trực tiếp export mặc định, bạn có thể sử dụng cấu hình webpack sau đây trong vue.config.js:

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

Web component

Bạn có thể tạo một mục nhập như một web component bằng cách sử dụng

vue-cli-service build --target wc --name my-element [entry]

Lưu ý rằng entry phải là một tệp *.vue. Vue CLI sẽ tự động bao bọc và đăng ký component này như một Web component cho bạn, và bạn không cần phải tự làm điều này trong main.js. Bạn có thể sử dụng main.js như một ứng dụng demo chỉ để phát triển.

Việc xây dựng sẽ tạo ra một tệp JavaScript duy nhất (và phiên bản được rút gọn của nó) với mọi thứ được nội tuyến. Kịch bản, khi được đưa vào một trang, đăng ký phần tử <my-element> tùy chỉnh , bao gồm Vue component đích sử dụng @vue/web-component-wrapper. Trình bao bọc tự động ủy quyền các thuộc tính, thuộc tính, sự kiện và các slot. Xem tài liệu cho @vue/web-component-wrapper để biết thêm chi tiết.

Lưu ý rằng gói dựa trên Vue là biến global có sẵn trên trang.

Chế độ này cho phép người dùng component của bạn sử dụng Vue component như một phần tử DOM bình thường:

<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>

Gói đăng ký nhiều web component

Khi xây dựng một gói web component, bạn cũng có thể nhắm mục tiêu nhiều component bằng cách sử dụng một glob làm mục nhập:

vue-cli-service build --target wc --name foo 'src/components/*.vue'

Khi xây dựng nhiều web component, --name sẽ được sử dụng làm tiền tố và tên phần tử tùy chỉnh sẽ được suy ra từ tên tệp component. Ví dụ, với --name foo và một component có tên HelloWorld.vue, phần tử tùy chỉnh kết quả sẽ được đăng ký là <foo-hello-world>.

Web component không đồng bộ

Khi nhắm mục tiêu nhiều web component, gói có thể trở nên khá lớn và người dùng chỉ có thể sử dụng một vài component mà gói của bạn đăng ký. Chế độ web component không đồng bộ tạo ra một gói phân tách mã với một tệp mục nhập nhỏ cung cấp thời gian chạy được chia sẻ giữa tất cả các component và đăng ký tất cả các phần tử tùy chỉnh trả trước. Việc triển khai thực tế của một component sau đó được tìm nạp theo yêu cầu chỉ khi một cá thể của phần tử tùy chỉnh tương ứng được sử dụng trên trang:

vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

File                Size                        Gzipped

dist/foo.0.min.js    12.80 kb                    8.09 kb
dist/foo.min.js      7.45 kb                     3.17 kb
dist/foo.1.min.js    2.91 kb                     1.02 kb
dist/foo.js          22.51 kb                    6.67 kb
dist/foo.0.js        17.27 kb                    8.83 kb
dist/foo.1.js        5.24 kb                     1.64 kb

Bây giờ trên trang, người dùng chỉ cần đưa ra Vue và tệp mục nhập:

<script src="https://unpkg.com/vue"></script>
<script src="path/to/foo.min.js"></script>

<!-- foo-one's implementation chunk is auto fetched when it's used -->
<foo-one></foo-one>