VueJS: Các lệnh và triển khai
Nuxt.js đi kèm với một tập hợp các lệnh hữu ích, nó dành cho cả phiên bản development và production.
Danh sách các lệnh
CHỈ HUY | SỰ MIÊU TẢ |
---|---|
đầu mối | Khởi chạy một máy chủ phát triển trên localhost: 3000 với tải lại nóng. |
xây dựng nuxt | Xây dựng ứng dụng của bạn với webpack và thu nhỏ JS & CSS (để sản xuất). |
bắt đầu | Khởi động máy chủ ở chế độ sản xuất (sau khi chạy nuxt build ). |
tạo ra | Xây dựng ứng dụng và tạo mọi tuyến đường dưới dạng tệp HTML (được sử dụng cho lưu trữ tĩnh). |
Lập luận
Bạn có thể sử dụng --help
với bất kỳ lệnh nào để có được cách sử dụng chi tiết. Các đối số phổ biến là:
--config-file
hoặc-c
: chỉ định đường dẫn đếnnuxt.config.js
tệp.--spa
hoặc-s
: Chạy lệnh trong chế độ SPA và vô hiệu hóa kết xuất phía máy chủ.--unix-socket
hoặc-n
: chỉ định đường dẫn đến ổ cắm UNIX.
Sử dụng trong gói.json
Bạn nên đặt các lệnh này trong package.json
:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
Sau đó, bạn có thể khởi chạy các lệnh của mình thông qua npm run <command>
(ví dụ npm run dev
:).
Mẹo chuyên nghiệp: để truyền đối số cho các lệnh npm, bạn cần thêm một --
tên tập lệnh (ví dụ npm run dev -- --spa
:).
Môi trương phat triển
Để khởi chạy Nuxt trong chế độ phát triển với tải lại nóng:
nuxt
// OR
npm run dev
Triển khai sản xuất
Nuxt.js cho phép bạn chọn giữa ba chế độ để triển khai ứng dụng của mình: SSR, SPA hoặc Tĩnh được tạo.
Triển khai máy chủ kết xuất (phổ quát)
Để triển khai, thay vì chạy nuxt
, bạn có thể muốn xây dựng trước thời hạn. Do đó, xây dựng và bắt đầu là các lệnh riêng biệt:
nuxt build
nuxt start
Bạn cũng có thể đặt server.https
ở của bạn nuxt.config.js
với cùng một tập hợp các tùy chọn truyền cho https.createServer
, bạn nên chọn để phục vụ Nuxt.js trong chế độ HTTPS. Ổ cắm Unix cũng có sẵn nếu bạn đặt server.socket
tùy chọn trong nuxt.config.js
(hoặc -n
trong CLI ). Khi sử dụng ổ cắm Unix , đảm bảo không đặt host
và port
tham số nếu không socket
tham số bị bỏ qua.
Những điều package.json
sau đây được khuyến nghị:
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
Lưu ý: chúng tôi khuyên bạn nên đưa .nuxt
vào .npmignore
hoặc .gitignore
.
Triển khai tạo tĩnh (Được kết xuất trước)
Nuxt.js cung cấp cho bạn khả năng lưu trữ ứng dụng web của bạn trên bất kỳ lưu trữ tĩnh nào.
Để tạo ứng dụng web của chúng tôi vào các tệp tĩnh:
npm run generate
Nó sẽ tạo một dist
thư mục với mọi thứ bên trong sẵn sàng để được triển khai trên một trang web lưu trữ tĩnh.
Nếu bạn có một dự án với các tuyến động , hãy xem cấu hình tạo để cho Nuxt.js biết cách tạo các tuyến động này.
Khi tạo ứng dụng web của bạn với nuxt generate
, bối cảnh được cung cấp cho asyncData và tìm nạp sẽ không có req
và res
.
Triển khai ứng dụng một trang (SPA)
nuxt generate
vẫn cần công cụ SSR của nó trong thời gian xây dựng / tạo trong khi có lợi thế là có tất cả các trang của chúng tôi được hiển thị trước và có điểm SEO và tải trang cao. Nội dung được tạo ra tại thời điểm xây dựng . Ví dụ: chúng tôi không thể sử dụng nó cho các ứng dụng trong đó nội dung phụ thuộc vào xác thực người dùng hoặc API thời gian thực (ít nhất là cho lần tải đầu tiên).
Ý tưởng SPA rất đơn giản! Khi chế độ SPA được bật bằng cách sử dụng mode: 'spa'
hoặc --spa
gắn cờ và chúng tôi chạy bản dựng, việc tạo sẽ tự động bắt đầu sau khi bản dựng. Thế hệ này chứa các liên kết tài nguyên và meta phổ biến, nhưng không phải nội dung trang.
Vì vậy, để triển khai SPA, bạn phải làm như sau:
- Thay đổi
mode
trongnuxt.config.js
đểspa
. - Chạy đi
npm run build
. - Triển khai
dist/
thư mục đã tạo vào lưu trữ tĩnh của bạn như Surge, GitHub Pages hoặc nginx.
Một phương thức triển khai khả thi khác là sử dụng Nuxt làm phần mềm trung gian trong các khung trong khi ở spa
chế độ. Điều này giúp giảm tải máy chủ và sử dụng Nuxt trong các dự án không thể thực hiện SSR.
Đọc Câu hỏi thường gặp của chúng tôi và tìm các ví dụ tiện lợi để triển khai đến các máy chủ phổ biến.