Tôi có thể tái tạo điều này và thành thật mà nói tôi hơi (hơi) ngạc nhiên về điều đó. Tôi sẽ có cùng một giả định như bạn rằng điều này sẽ "chỉ hoạt động". Tôi cho rằng vì chúng tôi đang sử dụng tiện ích mở rộng "Từ xa - WSL" trong trường hợp này nên tiện ích mở rộng sẽ xử lý việc dịch đường dẫn. Thật không may, điều này dường như không phải là trường hợp.
Nó có thể không phải là một tùy chọn cho các tiện ích mở rộng VSCode để sửa đổi đường dẫn của tệp khi khác (không phải phần mở rộng) đang hoạt động trên tệp.
Vì vậy, điều đang thực sự xảy ra là đường dẫn được chuyển đến trình duyệt Windows của bạn là tệp://home/pypy/books/paper.htmlvà trình duyệt Windows sẽ không tìm thấy tệp có đường dẫn đó. Như bạn đã tìm thấy, đối với trình duyệt Windows, giao diện đó sẽ giống như:
tập tin://wsl$/ubuntu/home/pypy/books/paper.html
# hoặc
tệp://wsl.local/ubuntu/home/pypy/books/paper.html
# Phần "ubuntu" có thể khác nhau tùy thuộc vào tên phân phối chính xác của bạn
Lưu ý bên lề: Các %24 mà bạn đang thấy chỉ là dạng mã hóa URL của $.
Có một số giải pháp:
Đầu tiên, một giải pháp đơn giản là sử dụng Remote-WSL: Mở lại trong Thư mục trong Windows hoạt động:
- Trong VSCode, nhấn Điều khiển+Sự thay đổi+P để mở Bảng lệnh
- Bắt đầu gõ "mở lại" và chọn tùy chọn Remote-WSL: Mở lại trong Thư mục trong Windows
- Chạy lại dự án HTML của bạn thông qua F5
Trình duyệt sẽ mở đúng cách bằng cách sử dụng các cửa sổ (chứ không phải WSL/Linux).
Tùy chọn thứ hai và tùy chọn bạn thường sử dụng khi bạn tiến bộ hơn trong quá trình phát triển HTML của mình, đó là chạy một máy chủ web cục bộ. Điều này sẽ cho phép bạn phát triển trong một môi trường "thế giới thực" hơn, vì bạn sẽ cần phải làm gì để nhiều tính năng hoạt động (ví dụ: Node và các khung web khác nhau của nó như Svelte, React, v.v., v.v.).
Điều này có ảnh hưởng đến trang web của tôi trong tương lai không? Nó sẽ gây ra vấn đề lưu trữ?
Vâng, thành thật mà nói, nó có thể, nhưng không phải nếu bạn làm mọi thứ "đúng cách". Đó là để đảm bảo rằng các đường dẫn trong HTML của bạn là liên quan đến vào thư mục của tập tin. Ví dụ, bạn có thể tham chiếu đến tệp hình ảnh trong thư mục con của tệp HTML bằng cách chỉ định:
<img src="file://wsl.local/ubuntu/home/pypy/books/images/logo.png" />
Và điều đó sẽ hoạt động khi xem tệp cục bộ trên máy của bạn. Tất nhiên, nó sẽ bị lỗi khi bạn lưu trữ nó trên một máy chủ web thực.
Thay vào đó, hãy sử dụng một đường dẫn tương đối:
<img src="images/logo.png" />
... sẽ hoạt động trong cả VSCode khi xem cục bộ (ít nhất là sau khi chọn Mở lại trong thư mục trong Windows) và khi lưu trữ trên web.
