Thiết lập và chạy dự án frontend với Vue.js trên môi trường Windows

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã cài đặt Node.js và npm – hai công cụ thiết yếu để làm việc với các dự án frontend hiện đại. Sau khi clone một dự án mã nguồn mở như renren-fast-vue, bước đầu tiên là chạy lệnh:

npm install

Lệnh này sẽ đọc file package.json và tải về tất cả các dependency cần thiết. Tuy nhiên, trong quá trình thực hiện, bạn có thể gặp phải một số lỗi phổ biến dưới đây cùng với cách khắc phục.

1. Thiếu môi trường Python 2.7

Một số package (như node-gyp) yêu cầu Python 2.7 để biên dịch native module. Nếu chưa cài, bạn cần tải và cài đặt Python 2.7, sau đó thêm hai đường dẫn sau vào biến môi trường PATH:

C:\Python27<br>C:\Python27\Scripts

Sau khi cập nhật, mở lại terminal để hệ thống nhận biến mới.

2. Lỗi khi cài đặt node-sass

Bạn có thể gặp lỗi tương tự như:

npm ERR! node-sass@4.9.0 postinstall: `node scripts/build.js`<br>npm ERR! Exit status 1

Lỗi này thường xảy ra do vấn đề tải tệp binary từ máy chủ. Cách xử lý hiệu quả là gỡ và cài lại node-sass:

npm uninstall node-sass<br>npm install node-sass

Ngoài ra, bạn cũng có thể thử dùng lệnh với registry mirror để tăng tốc độ tải:

npm install node-sass --registry=https://registry.npmmirror.com

3. Lỗi build tools trên Windows

Khi xuất hiện lỗi liên quan đến MSBUILD như:

MSBUILD : error MSB4132: Không nhận diện được phiên bản công cụ "2.0". Các phiên bản khả dụng là "4.0".

Bạn cần cài đặt Visual C++ Build Tools 2015 hoặc Windows Build Tools. Một cách nhanh chóng là sử dụng lệnh:

npm install --global windows-build-tools --vs-version=2015

Sau khi hoàn tất, chạy lại:

npm install --msvs_version=2015

Khởi động lại máy tính nếu cần để đảm bảo các thay đổi được áp dụng đầy đủ.

Kết quả mong đợi sau khi cài đặt thành công

Khi npm install hoàn tất, bạn sẽ thấy thông báo tương tự:

up to date in 8.703s

Một cảnh báo về fsevents có thể xuất hiện nhưng có thể bỏ qua vì đây là dependency dành riêng cho macOS.

Chạy dự án với npm run dev

Thực thi lệnh:

npm run dev

Kết quả thành công sẽ hiển thị tiến trình build webpack và thông báo cuối cùng:

DONE  Compiled successfully in 13934ms<br>Your application is running here: http://localhost:8001

Bạn có thể truy cập ứng dụng tại địa chỉ http://localhost:8001.

Liên kết với backend renren-fast

Nếu bạn đang sử dụng cùng lúc backend renren-fast, đảm bảo backend đã chạy ở cổng mặc định (thường là 8080). Ứng dụng frontend sẽ gọi API tới backend thông qua proxy được cấu hình sẵn.

Đăng nhập với tài khoản mặc định:

  • Tên đăng nhập: admin
  • Mật khẩu: để trống hoặc theo hướng dẫn của backend

Thẻ: Vue.js npm node-sass Python 2.7 Windows Build Tools

Đăng vào ngày 1 tháng 6 lúc 10:29