Asked May 25th, 2023 11:08 a.m. 130 0 2
  • 130 0 2
+1

Build dự án ra file dist thì khi reload lại trang bị lỗi.

Share
  • 130 0 2

Em đang gặp một vấn đề như sau: Khi em build dự án(VueJS) ra dist và up lên hosting thì khi em nhấp vào link đến 1 trang khác ban đầu vẫn oke. Nhưng sau khi em reload lại nó thì xẩy ra vấn đề là nó báo lỗi: Not Found The requested URL was not found on this server. Mong các cao nhân chỉ giáo

2 ANSWERS


Answered May 26th, 2023 1:54 a.m.
Accepted
+1

Nó bị lỗi khả năng là app bạn đang làm là SPA mà trên server bạn chỉ cấu hình routing cho duy nhất trang root /. Điều này sẽ lý giải cho việc:

  1. Khi bạn vào trang chủ bằng URL trên trình duyệt vẫn xem được.
  2. Bạn click vào link trang khác thì vẫn xem được. Việc chuyển trang trên browser thực chất chỉ là client-side navigation do Vue Router thực hiện. Do đó, nội dung bạn xem được là Vue App tạo ra, không phải kết quả từ server trả về.

Bạn cần cấu hình Rewrite URL cho Apache trên hosting để xem được nhé. Mà nếu app chỉ là SPA thì bạn nên upload lên Github Pages hoặc các dịch vụ cloud khác có lẽ sẽ đỡ tốn chi phí hơn là dùng hosting mà lại được dùng sẵn CDN từ các dịch vụ đó.

Share
Avatar Phạm Duy Vũ @binchanhkun99
May 26th, 2023 5:49 p.m.

@huukimit đr a ợ, em vừa chuyển qua vps xài nginx rồi 😅

+1
| Reply
Share
Answered May 25th, 2023 5:34 p.m.
+1

do route là dùng js nên khi load trang theo url nó request lên server sẽ bị lỗi.

bạn cấu hình server rewrite all request != file vào index.html

nếu dùng nginx có thể thử try_files $uri $uri/ /index.html

Share
Avatar Phạm Duy Vũ @binchanhkun99
May 26th, 2023 1:40 a.m.
Avatar Phạm Duy Vũ @binchanhkun99
May 26th, 2023 1:40 a.m.

@kdg Chuyện là em đàn k dùng nginx đấy bác ạ, cái cấu hình là sao bác nhỉ?

0
| Reply
Share
May 26th, 2023 5:43 a.m.

bạn cẫn nhắc thử ý này xem sao

bạn cấu hình server rewrite all request != file vào index.html

Nếu bạn đang sử dụng lazy loading thì cũng nên chú ý.

+1
| Reply
Share
May 26th, 2023 5:50 p.m.

@binchanhkun99 cấu hình thường theo path /etc/nginx/site-enabled/<config_file_name>

bác có thể thêm trong đoạn location / {

example dưới đây là cho cấu hính static đơn giản,

 location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a /index.html.
                try_files $uri $uri/ /index.html;
        }
0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
May 26th, 2023 5:51 p.m.

@kdg thanks bác nhé ^^

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.