VueJS: CLI Serve

Sử dụng Binary

Bên trong một dự án Vue CLI sẽ cài đặt @vue/cli-service một tên binary vue-cli-service. Bạn có thể truy cập trực tiếp binary như vue-cli-service trong các tập lệnh npm hoặc ./node_modules/.bin/vue-cli-service từ thiết bị đầu cuối.

Đây là những gì bạn sẽ thấy trong một dự án package.json sử dụng giá trị đặt sẵn mặc định:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

Bạn có thể gọi các tập lệnh này bằng cách sử dụng npm hoặc yarn:

npm run serve
# hoặc
yarn serve

Nếu bạn có sẵn npx (nên đi kèm với phiên bản cập nhật của npm), bạn cũng có thể gọi trực tiếp binary bằng:

npx vue-cli-service serve

Đây là Trình Phân tích Webpack từ GUI đang hoạt động:

vue-cli-service serve

Sử dụng: vue-cli-service serve [options] [entry]

Các tùy chọn:

  --open    mở trình duyệt khi khởi động server
  --copy    copy url tới clipboard khi khởi động server
  --mode    chỉ định chế độ env (mặc định: development)
  --host    chỉ định host (mặc định: 0.0.0.0)
  --port    chỉ định port (mặc định: 8080)
  --https   dùng https (mặc định: false)

Các lệnh vue-cli-service serve khởi động máy chủ dev (dựa trên webpack-dev-server) đi kèm với Hot-Module-Replacement (HMR) làm việc ngoài box.

Ngoài các cờ dòng lệnh, bạn cũng có thể cấu hình máy chủ dev bằng cách sử dụng trường devServer trong vue.config.js.

vue-cli-service build

Sử dụng: vue-cli-service build [options] [entry|pattern]

options:

  --mode        chỉ định chế độ env (mặc định: production)
  --dest        chỉ định thư mục output (mặc định: dist)
  --modern      xây dựng app tập trung vào các trình duyệt hiện đại với fallback tự động
  --target      app | lib | wc | wc-async (mặc định: app)
  --name        tên cho lib hoặc chế độ web-component (mặc định: "name" trong package.json hoặc tên file đầu vào)
  --no-clean    không di chuyển thư mục dist trước khi xây dựng project
  --report      tạo file report.html để hỗ trợ nội dung gói phân tích
  --report-json tạo file report.json để trợ giúp nội dung gói phân tích
  --watch       xem các thay đổi

vue-cli-service build tạo ra một gói production sẵn sàng trong thư mục dist/, với việc rút gọn cho JS / CSS / HTML và phân tách đoạn nhà cung cấp tự động để lưu bộ nhớ đệm tốt hơn. Tệp kê khai đoạn được gạch chân vào HTML.

Có một vài cờ hữu ích:

• --modern xây dựng ứng dụng của bạn bằng Chế độ hiện đại, chuyển mã ES2015 gốc tới các trình duyệt hiện đại hỗ trợ nó, với dự phòng tự động cho gói cũ.

• --target cho phép bạn xây dựng bất kỳ thành phần nào trong dự án của mình dưới dạng thư viện hoặc thành phần web. Xem xây dựng mục tiêu để biết thêm chi tiết.

• --report và --report-json sẽ tạo báo cáo dựa trên thống kê xây dựng của bạn có thể giúp bạn phân tích kích thước của các mô-đun nằm trong gói của bạn.

vue-cli-service inspect

Sử dụng: vue-cli-service inspect [options] [...paths]

options:

  --mode    chỉ định chế độ env (mặc định: development)

Bạn có thể sử dụng vue-cli-service inspect để kiểm tra cấu hình webpack bên trong một dự án Vue CLI. Xem Kiểm tra cấu hình Webpack để biết thêm chi tiết.

Kiểm tra tất cả các lệnh có sẵn

Một số plugin CLI sẽ thêm các lệnh bổ sung vào vue-cli-service. Ví dụ, @vue/cli-plugin-eslint sẽ thêm lệnh vue-cli-service lint. Bạn có thể xem tất cả các lệnh được thêm bằng cách chạy:

npx vue-cli-service help

Bạn cũng có thể tìm hiểu về các tùy chọn có sẵn của mỗi lệnh bằng:

npx vue-cli-service help [command]

Caching và Parallelization

• cache-loader được kích hoạt để biên dịch Vue / Babel / TypeScript theo mặc định. Các tệp được lưu trong bộ nhớ cache bên trong node_modules/.cache- nếu gặp sự cố biên dịch, trước tiên hãy thử xóa thư mục bộ nhớ cache.

• thread-loader sẽ được kích hoạt để chuyển đổi Babel / TypeScript khi máy có nhiều hơn 1 lõi CPU.

Git Hooks

Khi được cài đặt, @vue/cli-service cũng cài đặt yorkie, cho phép bạn dễ dàng chỉ định các hook Git bằng cách sử dụng trường gitHooks trong package.json:

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

Cấu hình mà không cần lược bớt

Các dự án được tạo qua vue create đã sẵn sàng để thực thi mà không cần cấu hình bổ sung. Các plugin được thiết kế để làm việc với nhau vì vậy trong hầu hết các trường hợp, tất cả những gì bạn cần làm là chọn các tính năng bạn muốn trong các lời nhắc tương tác.

Tuy nhiên, chúng tôi cũng hiểu rằng không thể đáp ứng mọi nhu cầu có thể, và nhu cầu của một dự án cũng có thể thay đổi theo thời gian. Các dự án được tạo bởi Vue CLI cho phép bạn cấu hình hầu hết mọi khía cạnh của công cụ mà không cần phải lược bớt đi. Xem Tham khảo cấu hình để biết thêm chi tiết.