VueJS: Assets

Theo mặc định, Nuxt sử dụng các trình tải webpack gồm vue-loader, file-loader và url-loader để phục vụ các asset mạnh. Bạn cũng có thể sử dụng thư mục static cho các asset tĩnh.

Webpack

vue-loader tự động xử lý các tệp kiểu và mẫu của bạn và css-loadertrình biên dịch mẫu Vue ra khỏi hộp. Trong quá trình biên soạn này, tất cả các URL tài sản như <img src="...">, background: url(...)và CSS @importđược giải quyết như mô-đun phụ thuộc.

Ví dụ: chúng ta có cây tập tin này:

-| assets/
----| image.png
-| pages/
----| index.vue

Nếu bạn sử dụng url('~assets/image.png')trong CSS của mình, nó sẽ được dịch sang require('~/assets/image.png').

Hoặc nếu bạn tham chiếu hình ảnh đó trong pages/index.vue:

<template>
  <img src="~/assets/image.png">
</template>

Nó sẽ được tổng hợp thành:

createElement('img', { attrs: { src: require('~/assets/image.png') }})

Bởi vì .pngkhông phải là một tập tin JavaScript, Nuxt.js cấu hình webpack sử dụng tập tin-loader và url-loader để xử lý chúng cho bạn.

Lợi ích của những bộ tải này là:

• file-loadercho phép bạn chỉ định nơi sao chép và đặt tệp nội dung và cách đặt tên tệp bằng cách sử dụng băm phiên bản để lưu vào bộ đệm tốt hơn. Trong sản xuất, bạn sẽ được hưởng lợi từ bộ nhớ đệm dài hạn theo mặc định!
• url-loadercho phép bạn đặt nội tuyến một cách có điều kiện một tệp dưới dạng URL dữ liệu cơ sở 64 nếu chúng nhỏ hơn một ngưỡng nhất định. Điều này có thể giảm một số yêu cầu HTTP cho các tệp tầm thường. Nếu tệp lớn hơn ngưỡng, nó sẽ tự động quay trở lại trình tải tệp.

Đối với hai bộ tải đó, cấu hình mặc định là:

// https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L297-L316
[
  {
    test: /\.(png|jpe?g|gif|svg|webp)$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1kB
      name: 'img/[name].[hash:7].[ext]'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1kB
      name: 'fonts/[name].[hash:7].[ext]'
    }
  }
]

Điều đó có nghĩa là mọi tệp dưới 1 KB sẽ được nội tuyến dưới dạng URL dữ liệu cơ sở 64. Nếu không, hình ảnh / phông chữ sẽ được sao chép trong thư mục tương ứng của nó (trong thư mục .nuxt) với tên chứa hàm băm phiên bản để lưu vào bộ đệm tốt hơn.

Khi khởi chạy ứng dụng của chúng tôi với nuxt, mẫu của chúng tôi trong pages/index.vue:

<template>
  <img src="~/assets/image.png">
</template>

Sẽ được chuyển thành:

<img src="/_nuxt/img/image.0c61159.png">

Nếu bạn muốn thay đổi cấu hình trình tải, vui lòng sử dụng build.extend .

Static

Nếu bạn không muốn sử dụng tài sản Webpack từ assetsthư mục, bạn có thể tạo và sử dụng staticthư mục (trong thư mục gốc dự án của bạn).

Tất cả các tệp được bao gồm sẽ được Nuxt tự động phục vụ và có thể truy cập thông qua URL gốc dự án của bạn. ( static/favicon.icosẽ có sẵn tại localhost:3000/favicon.ico)

Tùy chọn này hữu ích cho các tệp như robots.txt, sitemap.xmlhoặc CNAME(rất quan trọng đối với việc triển khai Trang GitHub).

Trong mã của bạn, sau đó bạn có thể tham chiếu các tệp này liên quan đến root ( /):

<!-- Static image from static directory -->
<img src="/my-image.png"/>

<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png"/>