VueJS: Các lệnh và triển khai


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

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 --helpvớ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-filehoặc -c: chỉ định đường dẫn đến nuxt.config.jstệp.
  • --spahoặ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-sockethoặ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.jsvớ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.sockettùy chọn trong nuxt.config.js(hoặc -ntrong CLI ). Khi sử dụng ổ cắm Unix , đảm bảo không đặt hostvà porttham số nếu không sockettham số bị bỏ qua.

Những điều package.jsonsau đâ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 .nuxtvào .npmignorehoặ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 distthư 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 generatebối cảnh được cung cấp cho asyncData và tìm nạp sẽ không có reqvà res.

Triển khai ứng dụng một trang (SPA)

nuxt generatevẫ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 --spagắ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 modetrong nuxt.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 ở spachế độ. Đ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.

» Tiếp: Các công cụ phát triển
« Trước: TypeScript Support
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
Copied !!!