Không thể lấy/chỉ mục máy chủ trực tiếp HTML

Question

Đây là một máy chủ phát triển nhỏ với khả năng tải lại trực tiếp. Sử dụng nó để hack các tệp HTML/JavaScript/CSS của bạn, nhưng không phải để triển khai trang web cuối cùng

Nội dung chính Show

Cài đặt
Sử dụng từ dòng lệnh
Sử dụng từ nút
Xử lý sự cố
Làm thế nào nó hoạt động
Đóng góp
Lịch sử phiên bản
Giấy phép
Tại sao máy chủ trực tiếp của tôi không được làm mới?
Máy chủ trực tiếp trong HTML là gì?
Mã được đưa vào bởi máy chủ trực tiếp là gì?

Có hai lý do để sử dụng cái này

Các yêu cầu AJAX không hoạt động với giao thức
```
npm install -g live-server
```
4 do các hạn chế về bảo mật, tôi. e. bạn cần một máy chủ nếu trang web của bạn tìm nạp nội dung thông qua JavaScript
Tự động tải lại trang sau khi thay đổi tệp có thể tăng tốc độ phát triển

Bạn không cần cài đặt bất kỳ plugin trình duyệt nào hoặc thêm thủ công các đoạn mã vào các trang của mình để chức năng tải lại hoạt động, hãy xem phần "Cách thức hoạt động" bên dưới để biết thêm thông tin. Nếu bạn không muốn/cần tải lại trực tiếp, có lẽ bạn nên sử dụng thứ gì đó đơn giản hơn, chẳng hạn như một lớp lót dựa trên Python sau đây

python -m SimpleHTTPServer

Cài đặt

Bạn cần nút. js và npm. Có lẽ bạn nên cài đặt cái này trên toàn cầu

cách npm

npm install -g live-server

cách thủ công

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

Sử dụng từ dòng lệnh

Đưa ra lệnh

npm install -g live-server

5 trong thư mục dự án của bạn. Ngoài ra, bạn có thể thêm đường dẫn để dùng làm tham số dòng lệnh

Thao tác này sẽ tự động khởi chạy trình duyệt mặc định. Khi bạn thực hiện thay đổi đối với bất kỳ tệp nào, trình duyệt sẽ tải lại trang - trừ khi đó là tệp CSS, trong trường hợp đó, các thay đổi được áp dụng mà không cần tải lại

Tham số dòng lệnh

```
npm install -g live-server
```
6 - chọn cổng để sử dụng, mặc định. PORT env var hoặc 8080
```
npm install -g live-server
```
7 - chọn địa chỉ máy chủ để liên kết, mặc định. IP env var hoặc 0. 0. 0. 0 ("địa chỉ bất kỳ")
```
npm install -g live-server
```
0 - chặn khởi chạy trình duyệt web tự động
```
npm install -g live-server
```
1 - chỉ định trình duyệt sẽ sử dụng thay vì trình duyệt mặc định của hệ thống
```
npm install -g live-server
```
2 - chặn ghi nhật ký
```
npm install -g live-server
```
3 - ghi nhật ký nhiều hơn (ghi nhật ký tất cả các yêu cầu, hiển thị tất cả các giao diện IPv4 đang nghe, v.v. )
```
npm install -g live-server
```
4 - khởi chạy trình duyệt tới PATH thay vì máy chủ gốc
```
npm install -g live-server
```
5 - chuỗi đường dẫn được phân tách bằng dấu phẩy để theo dõi riêng các thay đổi (mặc định. xem mọi thứ)
```
npm install -g live-server
```
6 - chuỗi đường dẫn được phân tách bằng dấu phẩy để bỏ qua (định nghĩa tương thích với bất kỳ đối sánh nào)
```
npm install -g live-server
```
7 - Biểu thức chính quy của các tệp cần bỏ qua (ví dụ:
```
npm install -g live-server
```
8) (KHÔNG ĐƯỢC DÙNG cho
```
npm install -g live-server
```
9)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

0 - tải lại trang khi thay đổi CSS, thay vì chèn CSS đã thay đổi

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

1 - đường dẫn đến. js xuất một chức năng phần mềm trung gian để thêm;

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

3 - cung cấp tệp này (tương đối gốc của máy chủ) thay cho các tệp bị thiếu (hữu ích cho các ứng dụng một trang)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

4 - phục vụ nội dung đường dẫn theo tuyến đã xác định (có thể có nhiều định nghĩa)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

5 - dịch các yêu cầu từ /abc sang /#/abc (tiện dụng cho Ứng dụng một trang)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

6 - (100 mili giây mặc định) đợi tất cả các thay đổi, trước khi tải lại

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

7 - Cho phép http-auth mong đợi tệp htpasswd nằm ở PATH

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

8 - Kích hoạt CORS cho mọi nguồn gốc (phản ánh nguồn gốc yêu cầu, các yêu cầu có thông tin xác thực được hỗ trợ)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

9 - ĐƯỜNG DẪN đến mô-đun cấu hình HTTPS

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

30 - Mô-đun HTTPS tùy chỉnh (e. g.

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

31)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

32 - ủy quyền tất cả các yêu cầu ROUTE tới URL

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

33 - hiển thị gợi ý sử dụng ngắn gọn và thoát

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

34 - hiển thị phiên bản và thoát

tùy chọn mặc định

Nếu tệp

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

35 tồn tại, nó sẽ được tải và sử dụng làm tùy chọn mặc định cho máy chủ trực tiếp trên dòng lệnh. Xem "Cách sử dụng từ nút" để biết tên tùy chọn

Sử dụng từ nút

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

3

HTTPS

Để bật hỗ trợ HTTPS, bạn cần tạo một mô-đun cấu hình. Mô-đun phải xuất một đối tượng sẽ được sử dụng để định cấu hình máy chủ HTTPS. Các phím giống như các phím trong

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

36 cho

Ví dụ

npm install -g live-server

1

Nếu sử dụng API nút, bạn cũng có thể chuyển trực tiếp đối tượng cấu hình thay vì đường dẫn đến mô-đun

HTTP/2

Để nhận hỗ trợ HTTP/2, người ta có thể cung cấp mô-đun HTTPS tùy chỉnh thông qua tham số

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

37 CLI (tùy chọn

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

38 cho Node. tập lệnh js). Đảm bảo cài đặt mô-đun trước. Chế độ không mã hóa HTTP/2 không được trình duyệt hỗ trợ, do đó không được hỗ trợ bởi

npm install -g live-server

5. Xem và để biết thêm chi tiết

Ví dụ từ CLI(bash)

npm install -g live-server

4

Xử lý sự cố

Không tải lại khi thay đổi
- Mở bảng điều khiển trình duyệt của bạn. sẽ có một thông báo ở trên cùng cho biết tải lại trực tiếp đã được bật. Lưu ý rằng bạn sẽ cần một trình duyệt hỗ trợ WebSockets. Nếu có sai sót, hãy xử lý chúng. Nếu nó vẫn không hoạt động, hãy gửi một vấn đề
Lỗi. xem ENOSPC
- Nhìn thấy
Tải lại hoạt động nhưng các thay đổi bị thiếu hoặc lỗi thời
- Hãy thử sử dụng tùy chọn
```
npm install -g live-server
```
  10. Trong đó
```
npm install -g live-server
```
  11 là thời gian tính bằng mili giây để đợi trước khi thực hiện tải lại

Làm thế nào nó hoạt động

Máy chủ là một ứng dụng nút đơn giản phục vụ thư mục làm việc và các thư mục con của nó. Nó cũng theo dõi các tệp để biết các thay đổi và khi điều đó xảy ra, nó sẽ gửi một thông báo qua kết nối ổ cắm web tới trình duyệt để hướng dẫn nó tải lại. Để phía máy khách hỗ trợ điều này, máy chủ sẽ đưa một đoạn mã JavaScript nhỏ vào mỗi tệp html được yêu cầu. Tập lệnh này thiết lập kết nối ổ cắm web và lắng nghe các yêu cầu tải lại. Các tệp CSS có thể được làm mới mà không cần tải lại toàn bộ trang bằng cách tìm các biểu định kiểu được tham chiếu từ DOM và lừa trình duyệt tìm nạp và phân tích lại chúng

Đóng góp

Chúng tôi hoan nghênh những đóng góp. Xem ĐÓNG GÓP. md để biết chi tiết

Lịch sử phiên bản

v1. 2. 2
- Khắc phục sự cố phụ thuộc

v1. 2. 1

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

30 để chỉ định mô-đun HTTPS tùy chỉnh (e. g.

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

31) (@pavel)

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

0 để tải lại trang khi thay đổi css thay vì chèn các thay đổi (@kylecordes)

Các phụ thuộc được cập nhật để loại bỏ các lỗ hổng trong deps

v1. 2. 0
- Thêm tham số
```
npm install -g live-server
```
  15 để sử dụng phần mềm trung gian bên ngoài
- Tham số API
```
git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally
```
  2 hiện cũng chấp nhận các chuỗi tương tự như
```
npm install -g live-server
```
  15
- Đã thay đổi trình xem tệp để cải thiện tốc độ (@pavel)
- ```
npm install -g live-server
```
  9 hiện chấp nhận biểu thức chính quy và khối cầu, không dùng nữa
```
npm install -g live-server
```
  19 (@pavel)
- Đã thêm tùy chọn cli
```
npm install -g live-server
```
  40 (logLevel 3) (@pavel)
  - Ghi lại tất cả các yêu cầu, hiển thị cảnh báo khi không thể chèn tệp html, hiển thị tất cả các giao diện IPv4 đang nghe
- Cấu hình HTTPS hiện cũng chấp nhận một đối tượng đơn giản (@pavel)
- Di chuyển
```
git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally
```
  5 sang tệp phần mềm trung gian đi kèm
- Phần mềm trung gian
```
npm install -g live-server
```
  42 đi kèm mới hoạt động giống như
```
npm install -g live-server
```
  43 nhưng bỏ qua các yêu cầu có phần mở rộng
- Cho phép nhiều đối số
```
npm install -g live-server
```
  44 (@PirtleShell)
- Tiêm vào
```
npm install -g live-server
```
  45 nếu không tìm thấy
```
npm install -g live-server
```
  46 (@pmd1991)
- Cập nhật phụ thuộc
v1. 1. 0
- Hỗ trợ proxy (@pavel)
- Hỗ trợ phần mềm trung gian (@achandrasekar)
- Cập nhật phụ thuộc (@tapio, @rahatarmanahmed)
- Sử dụng Travis CI
v1. 0. 0
- Hỗ trợ HTTPS (@pavel)
- Hỗ trợ xác thực cơ bản HTTP (@hey-johnnypark)
- Hỗ trợ CORS (@pavel)
- Hỗ trợ gắn các tệp đơn (@pavel)
- Tùy chọn cli 25 cho các ứng dụng một trang, dịch các yêu cầu từ /abc sang /#/abc (@evanplaice)
- Kiểm tra
```
npm install -g live-server
```
  48 env var để biết máy chủ lưu trữ mặc định (@dotnetCarpenter)
- Sửa
```
npm install -g live-server
```
  49 từ tệp cấu hình (@cyfersystems)
- Sửa lỗi chạy thử cho Windows (@peterhull90)
v0. 9. 2
- Đã cập nhật hầu hết các phụ thuộc lên các phiên bản mới nhất
- ```
npm install -g live-server
```
  40 bây giờ tắt tiếng cảnh báo về lỗi tiêm
- Đưa ra các đường dẫn
```
npm install -g live-server
```
  41 rõ ràng giờ đây sẽ vô hiệu hóa việc thêm các đường dẫn được gắn để xem
v0. 9. 1
- ```
npm install -g live-server
```
  7 loại trừ các tệp khỏi xem bằng regrec (@psi-4ward)
- Tùy chọn cli
```
npm install -g live-server
```
  5 để chỉ xem các đường dẫn nhất định
v0. 9. 0
- Tùy chọn cli của
```
git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally
```
  4 để chỉ định các tuyến đường thay thế cho các đường dẫn (@pmentz)
- ```
npm install -g live-server
```
  1 tùy chọn cli để chỉ định trình duyệt sẽ sử dụng (@sakiv)
- Cải thiện báo cáo lỗi
- Hỗ trợ cơ bản để đưa mã tải lại vào tệp SVG (@dotnetCarpenter, @tapio)
- Máy chủ trực tiếp. shutdown() để đóng máy chủ và trình theo dõi tệp
- Nếu tham số máy chủ được cung cấp, hãy sử dụng tham số đó cho URL trình duyệt thay vì IP đã phân giải
- Khung thử nghiệm ban đầu (@harrytruong, @evanplaice, @tapio)
v0. 8. 2
- Tải cài đặt ban đầu từ
```
git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally
```
  35 nếu có (@mikker)
- Cho phép
```
npm install -g live-server
```
  47 chọn cổng ngẫu nhiên (@viqueen)
- Sửa lỗi chèn khi phần mở rộng tệp không phải là chữ thường (@gusgard)
- Không thành công nếu trình duyệt không hỗ trợ WebSockets (@mattymaloney)
- Đã chuyển sang thư viện mở trình duyệt được bảo trì nhiều hơn
v0. 8. 1
- Thêm cờ dòng lệnh
```
npm install -g live-server
```
  48 để hiển thị phiên bản
- Thêm tùy chọn cli
```
npm install -g live-server
```
  49 để phản ánh tham số API
- Một lần nữa sử dụng 127. 0. 0. 1 thay vì 0. 0. 0. 0 làm URL trình duyệt
v0. 8. 0
- Hỗ trợ đồng thời nhiều client (@dvv)
- Chọn một cổng khả dụng ngẫu nhiên nếu cổng mặc định đang được sử dụng (@oliverzy, @harrytruong)
- Sửa lỗi Chrome đôi khi không áp dụng thay đổi CSS (@harrytruong)
- Tùy chọn cli của
```
npm install -g live-server
```
  6 để không xem các đường dẫn tương đối gốc của máy chủ đã cho (@richardgoater)
- Tùy chọn cli 23 để chỉ định tệp sẽ sử dụng khi không tìm thấy yêu cầu (@izeau)
- Tùy chọn cli của
```
npm install -g live-server
```
  52 để đợi thời gian được chỉ định trước khi tải lại (@leolower, @harrytruong)
v0. 7. 1
- Khắc phục tình trạng treo do cố gắng đưa vào các tệp html phân đoạn mà không có
```
npm install -g live-server
```
  53
- Tham số
```
npm install -g live-server
```
  54 trong thư viện để kiểm soát lượng thư rác trên bảng điều khiển
- Tùy chọn
```
npm install -g live-server
```
  40 cli để ngăn chặn thư rác trên bảng điều khiển
- ```
npm install -g live-server
```
  4 tùy chọn cli để khởi chạy trình duyệt trong đường dẫn được chỉ định thay vì root (@richardgoater)
- Tùy chọn
```
npm install -g live-server
```
  57 của thư viện không được dùng để thay thế cho
```
npm install -g live-server
```
  58
v0. 7. 0
- ĐỘT PHÁ API. Thư viện LiveServer hiện có tham số trong một đối tượng
- Thêm khả năng chỉ định máy chủ lưu trữ cho lib
- Chỉ đưa vào trang chủ khi làm việc với các thành phần web (e. g. Polyme) (@davej)
- Mở trình duyệt đến 127. 0. 0. 1, như 0. 0. 0. 0 có vấn đề
- Cờ dòng lệnh
```
npm install -g live-server
```
  0 để chặn khởi chạy trình duyệt
- Cờ dòng lệnh
```
npm install -g live-server
```
  60 để hiển thị mức sử dụng
v0. 6. 4
- Cho phép chỉ định cổng từ dòng lệnh.
```
npm install -g live-server
```
  61 (@Pomax)
- Đừng chèn tập lệnh làm điều đầu tiên để DOCTYPE vẫn hợp lệ (@wmira)
- Rõ ràng hơn với việc lắng nghe tất cả các giao diện (@inadarei)
v0. 6. 3
- Sửa nhiều tham số _cacheOverride gây ô nhiễm yêu cầu css
- Không tạo các biến toàn cầu trong tập lệnh được chèn
v0. 6. 2
- Khắc phục cảnh báo không dùng nữa từ
```
npm install -g live-server
```
  62
v0. 6. 1
- Xuất bản lại để khắc phục sự cố npm
v0. 6. 0
- Hỗ trợ sử dụng làm thư viện nút (@dpgraham)
v0. 5. 0
- Xem đã bị hỏng với các phiên bản mới của
```
npm install -g live-server
```
  63 > 2. 3. 3
- Đã thêm một số ghi nhật ký vào bảng điều khiển
v0. 4. 0
- Cho phép chỉ định thư mục để phục vụ từ dòng lệnh
v0. 3. 0
- danh sách thư mục
v0. 2. 0
- Làm mới CSS nhanh chóng (không tải lại trang)
- tái cấu trúc
v0. 1. 1
- Tài liệu và chỉnh sửa meta
v0. 1. 0
- phát hành lần đầu

Giấy phép

Sử dụng mã được cấp phép MIT từ Connect và Roots

(Giấy phép MIT)

Theo đây, quyền được cấp miễn phí cho bất kỳ người nào có được bản sao của phần mềm này và các tệp tài liệu liên quan ("Phần mềm"), để xử lý Phần mềm mà không bị hạn chế, bao gồm nhưng không giới hạn các quyền sử dụng, sao chép, sửa đổi, hợp nhất

Thông báo bản quyền ở trên và thông báo cấp phép này sẽ được bao gồm trong tất cả các bản sao hoặc phần quan trọng của Phần mềm

PHẦN MỀM ĐƯỢC CUNG CẤP "NGUYÊN TRẠNG", KHÔNG CÓ BẢO ĐẢM DƯỚI BẤT KỲ HÌNH THỨC NÀO, RÕ RÀNG HAY NGỤ Ý, BAO GỒM NHƯNG KHÔNG GIỚI HẠN Ở CÁC BẢO ĐẢM VỀ KHẢ NĂNG BÁN ĐƯỢC, TÍNH PHÙ HỢP CHO MỘT MỤC ĐÍCH CỤ THỂ VÀ KHÔNG VI PHẠM. TRONG BẤT KỲ TRƯỜNG HỢP NÀO TÁC GIẢ HOẶC NGƯỜI GIỮ BẢN QUYỀN SẼ KHÔNG CHỊU TRÁCH NHIỆM PHÁP LÝ VỀ BẤT KỲ KHIẾU NẠI, THIỆT HẠI HOẶC TRÁCH NHIỆM PHÁP LÝ KHÁC NÀO, DÙ TRONG MỘT HÀNH ĐỘNG HỢP ĐỒNG, NGOẠI TỆ HOẶC CÁCH NÀO KHÁC, PHÁT SINH TỪ, NGOÀI HOẶC LIÊN QUAN ĐẾN PHẦN MỀM HOẶC VIỆC SỬ DỤNG HOẶC CÁC GIAO DỊCH KHÁC TRONG

Tại sao máy chủ trực tiếp của tôi không được làm mới?

Đầu tiên, mở Command Palette bằng phím F1, sau đó gõ vào Preferences. Mở Cài đặt (JSON) và chọn tùy chọn đó. Thao tác này sẽ mở cài đặt VSCode của bạn. tập tin json. Cuộn xuống cuối tệp, thêm dấu phẩy sau cài đặt cuối cùng, sau đó dán vào "liveServer

Máy chủ trực tiếp trong HTML là gì?

Nó cho phép bạn nhấp chuột phải vào một tài liệu HTML và nó sẽ chạy một máy chủ cho bạn và mở một cửa sổ trình duyệt có tệp trong đó . Mọi thay đổi bạn thực hiện đối với tệp sẽ khiến trình duyệt tải lại và bạn có thể thấy chúng ngay lập tức - do đó có "máy chủ trực tiếp".

Mã được đưa vào bởi máy chủ trực tiếp là gì?

Tiêm mã là phương thức mà kẻ độc hại sử dụng để tiêm mã độc, lợi dụng lỗ hổng xác thực trong phần mềm . Vì ứng dụng không thể phát hiện mã độc từ mã của chính nó, nên kẻ tấn công sẽ giành được quyền truy cập vào thông tin bị hạn chế của ứng dụng.

programming html

Không thể lấy/chỉ mục máy chủ trực tiếp HTML

Cài đặt

Sử dụng từ dòng lệnh

Sử dụng từ nút

HTTPS

HTTP/2

Xử lý sự cố

Làm thế nào nó hoạt động

Đóng góp

Lịch sử phiên bản

Giấy phép

Tại sao máy chủ trực tiếp của tôi không được làm mới?

Máy chủ trực tiếp trong HTML là gì?

Mã được đưa vào bởi máy chủ trực tiếp là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội