Tôi nên làm gì sau khi phát triển ứng dụng Vue với vue-cli?

Trong Angular có một số lệnh bó tất cả các tập lệnh thành một tập lệnh duy nhất và sau đó các tệp này được gửi đến máy chủ lưu trữ.

Có điều gì tương tự trong Vue ?

Tôi nghĩ bạn đã tạo dự án của bạn như thế này:

vue init webpack myproject

Chà, bây giờ bạn có thể chạy

npm run build

Sao chép index.html và / dist / thư mục vào thư mục gốc trang web của bạn. Làm xong.

Nếu bạn đã tạo dự án của mình bằng cách sử dụng:

vue init webpack myproject

Bạn cần đặt NODE_ENVsản xuất và chạy, vì dự án có gói web được cấu hình cho cả phát triển và sản xuất:

NODE_ENV=production npm run build

Sao chép dist/thư mục vào thư mục gốc trang web của bạn.

Nếu bạn đang triển khai với Docker, bạn cần một máy chủ cấp tốc, phục vụ dist/thư mục.

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]

trong thiết bị đầu cuối của bạn

npm run build

và bạn lưu trữ thư mục dist. để biết thêm xem video này

Nếu bạn gặp vấn đề với đường dẫn của mình, có thể bạn cần thay đổi tệp assetPublicPathtrong config/index.jsthư mục của mình thành thư mục con:

http://vuejs-temsheet.github.io/webpack/backend.html

Các lệnh cho những mã cụ thể để chạy được liệt kê bên trong tệp pack.json của bạn theo tập lệnh. Đây là một ví dụ về tôi:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Nếu bạn đang muốn chạy trang web của mình tại địa phương, bạn có thể kiểm tra nó với

npm serve

Nếu bạn đang tìm cách chuẩn bị trang web của mình để sản xuất, bạn sẽ sử dụng

npm build

Lệnh này sẽ tạo một thư mục dist có phiên bản nén của trang web của bạn.

Để triển khai ứng dụng của bạn vào môi trường prod, hãy thêm

"build": "vue-cli-service build --mode prod"

trong tập lệnh của bạn trong tập tin pack.json.

Mở tệp main.js của bạn và thêm

Vue.config.productionTip = false;

ngay sau khi nhập khẩu của bạn. Sau đó mở cli của bạn trong thư mục dự án và chạy lệnh này

npm run build

Điều này sẽ tạo một thư mục dist trong thư mục dự án của bạn, bạn có thể tải lên thư mục dist đó trong máy chủ của bạn và trang web của bạn sẽ hoạt động

Lệnh này là để bắt đầu máy chủ phát triển:

npm run dev

Trường hợp lệnh này dành cho bản dựng sản xuất:

npm run build

Đảm bảo nhìn và vào bên trong thư mục được tạo có tên là 'dist'.
Sau đó bắt đầu đẩy tất cả các tệp đến máy chủ của bạn.

Một cách để làm điều này mà không cần sử dụng VUE-CLI là gói tất cả các tệp tập lệnh vào một tệp js chất béo và sau đó tham chiếu tệp javascript lớn đó vào tệp mẫu chính.

Tôi thích sử dụng webpack như một gói và tạo một webpack.conig.js trong thư mục gốc của dự án. Tất cả các cấu hình như điểm vào, tệp đầu ra, bộ tải, v.v .. đều được lưu trong tệp cấu hình đó. Sau đó, tôi thêm một tập lệnh trong tệp pack.json sử dụng tệp webpack.config.js cho cấu hình webpack và bắt đầu xem tệp và tạo tệp Js được đóng gói vào vị trí được đề cập trong tệp webpack.config.js.

Tôi nghĩ bạn có thể sử dụng vue-cli

Nếu bạn đang sử dụng Vue CLI cùng với khung phụ trợ xử lý các tài sản tĩnh như một phần của việc triển khai, thì tất cả những gì bạn cần làm là đảm bảo Vue CLI tạo các tệp được xây dựng ở vị trí chính xác, sau đó làm theo hướng dẫn triển khai của khung phụ trợ của bạn .

Nếu bạn đang phát triển ứng dụng lối vào riêng biệt với phần phụ trợ của mình - tức là phần phụ trợ của bạn hiển thị API để giao diện của bạn nói chuyện, thì frontend của bạn về cơ bản là một ứng dụng hoàn toàn tĩnh. Bạn có thể triển khai nội dung được xây dựng trong thư mục dist tới bất kỳ máy chủ tệp tĩnh nào, nhưng hãy đảm bảo đặt đúng BaseUrl

1. npm run build - điều này sẽ làm xấu đi và thu nhỏ mã

2. lưu index.html và thư mục dist trong thư mục gốc của trang web của bạn.

3. dịch vụ lưu trữ miễn phí mà bạn có thể quan tâm - lưu trữ Firebase.

nếu bạn đã sử dụng vue-cli và webpack khi bạn tạo dự án của mình.

bạn có thể sử dụng chỉ

npm chạy lệnh build trong dòng lệnh và nó sẽ tạo thư mục dist trong dự án của bạn. Chỉ cần tải nội dung của thư mục này lên ftp của bạn và thực hiện.

ĐÂY LÀ ĐỂ NÂNG CẤP CHO MỘT FILEER (nếu bạn muốn ứng dụng của mình không được root, ví dụ URL / myApp /) - Tôi đã tìm kiếm câu trả lời này từ lâu ... hy vọng nó sẽ giúp được ai đó.

Nhận CLI VUE tại https://cli.vuejs.org/guide/ và sử dụng giao diện người dùng xây dựng để làm cho nó dễ dàng. Sau đó, trong cấu hình, bạn có thể thay đổi đường dẫn công khai thành / anything / và liên kết với URL / bất cứ điều gì.

Xem video này giải thích cách tạo ứng dụng vue bằng CLI nếu bạn cần thêm trợ giúp: https://www.youtube.com/watch?v=Wy9q22isx3U

Tài liệu vue cung cấp nhiều thông tin về điều này về cách bạn có thể triển khai đến các nhà cung cấp máy chủ khác nhau.

npm run build

Bạn có thể tìm thấy điều này từ tập tin json gói. phần kịch bản. Nó cung cấp các kịch bản để thử nghiệm và phát triển và xây dựng cho sản xuất.

Bạn có thể sử dụng các dịch vụ như netlify sẽ gói dự án của bạn bằng cách liên kết repo github của dự án từ trang web của họ. Nó cũng cung cấp thông tin về cách triển khai trên các trang web khác như heroku.

Bạn có thể tìm thêm chi tiết về điều này ở đây

Cài đặt đầu tiên Vue Cli trên toàn cầu

npm install -g @vue/cli

Để tạo một dự án mới, hãy chạy:

vue create project-name

chạy vue

npm run serve 

Vue CLI> = 3 sử dụng cùng một nhị phân vue, vì vậy nó ghi đè lên Vue CLI 2 (vue-cli). Nếu bạn vẫn cần chức năng init vue kế thừa, bạn có thể cài đặt một cây cầu toàn cầu:

Vue init toàn cầu

npm install -g @vue/cli-init

vue init bây giờ hoạt động chính xác như vue-cli@2.x

Tạo ứng dụng Vue

vue init webpack my-project

Chạy máy chủ phát triển

npm run dev

Nếu bạn muốn xây dựng và gửi đến máy chủ từ xa của mình, bạn có thể sử dụng dịch vụ cli ( https://cli.vuejs.org/guide/cli-service.html ), bạn có thể tạo các tác vụ để phục vụ, xây dựng và một để triển khai với một số các plugin cụ thể nhưvue-cli-plugin-s3-deploy