Không Hiển Thị App VueJS khi dùng npm run build
Khi mình dùng npm run build để build ra folder dist nhưng khi mở file html trong thư mục dist lên thì k hiển thị gì ạ? file html của mình
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>my-app</title><link href=/css/chunk-43b67b9e.bd5fa8da.css rel=prefetch><link href=/js/chunk-2c9f3c85.4385e80c.js rel=prefetch><link href=/js/chunk-2d0c8074.586e0002.js rel=prefetch><link href=/js/chunk-2d0d7c65.50d46aad.js rel=prefetch><link href=/js/chunk-2d0efcba.2e8ba2d6.js rel=prefetch><link href=/js/chunk-2d20f022.e06e0bfe.js rel=prefetch><link href=/js/chunk-2d217357.cce83bd5.js rel=prefetch><link href=/js/chunk-43b67b9e.dc1c0d3e.js rel=prefetch><link href=/js/chunk-48ef169d.466b54ca.js rel=prefetch><link href=/js/chunk-a5944ffe.f41e2d1e.js rel=prefetch><link href=/css/app.b0893e6d.css rel=preload as=style><link href=/css/chunk-vendors.db599641.css rel=preload as=style><link href=/js/app.eb48ce3a.js rel=preload as=script><link href=/js/chunk-vendors.335c3f5c.js rel=preload as=script><link href=/css/chunk-vendors.db599641.css rel=stylesheet><link href=/css/app.b0893e6d.css rel=stylesheet></head><body><noscript><strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=https://code.jquery.com/jquery-3.1.1.slim.min.js crossorigin=anonymous></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js></script><script src=/js/chunk-vendors.335c3f5c.js></script><script src=/js/app.eb48ce3a.js></script></body></html>
3 CÂU TRẢ LỜI
Bạn chưa đọc kĩ doc của VueJS rồi, khi bạn build project bằng npm run build
, Bạn không thể chỉ mở mỗi file index.html để chạy project mà bạn cần 1 webserver để làm điều đó. 1 trong những cách đơn giản đó là bạn tạo 1 server NodeJS Express với 1 route nào đó (ví dụ /) và trả về file index.html là được nhé.
Chi tiết ở trang chủ Vue-cli
Còn khi để chạy thật (production) thì bạn có thể vẫn dùng server NodeJS Express, nhưng cách mình khuyên là dùng 1 webserver như Nginx (hoặc Apache)
Nếu chỉ vào được trang chủ, sang suburl mà f5 không load được thì khả năng do bạn chưa config router trên server.
Có 2 cách:
- bạn mở file index.html trong dist bằng liveserver - một ext của vscode,.
- Bạn sửa lại đường dẫn load file trong file index.html thành đường dẫn tương đối. vue build ra xong file index.html thì các đường dẫn css,js bên trong thường là đường dẫn tuyệt đối. bạn mở file trực tiếp bằng trình duyệt thì sẽ ko load được các đường dẫn tuyệt đối này.
mô tả cụ thể kèm hình ảnh đi bạn