133

ฉันควรทำอย่างไรหลังจากพัฒนาแอปVueด้วยvue-cli?

ในAngularมีคำสั่งบางอย่างที่รวมสคริปต์ทั้งหมดไว้ในสคริปต์เดียวจากนั้นไฟล์เหล่านี้จะถูกส่งไปยังโฮสต์

มีบางอย่างที่เหมือนกันในVueหรือไม่?

vue.js vuejs2 vue-cli

ควรเป็นส่วนหนึ่งของ cli นี่คือหน้าเอกสารการปรับใช้vuejs.org/v2/guide/deployment.htmlขึ้นอยู่กับเวอร์ชันที่คุณใช้เทมเพลตที่คุณใช้อาจแตกต่างกันเล็กน้อย แต่คุณควรระบุว่าคุณกำลังสร้างงานสร้างเหมือนในเอกสาร

— Swimburger

2

ฉันใช้ 2.2.1 vue ฉันเห็นเอกสาร แต่ไม่มีข้อมูลเกี่ยวกับการปรับใช้ ฉันไม่ได้ใช้ nodejs ในโฮสต์ ดังนั้นเมื่อฉันเริ่มต้นใน localhost มันใช้งานได้ แต่เมื่อฉันดาวน์โหลดไฟล์ทั้งหมดไปที่โฮสเตอร์ไม่มีอะไรในหน้านี้

— artem0071

8

เมื่อคุณสร้างบิวด์มันอาจจะรวบรวมไฟล์ทั้งหมด (html, css, js) ไปยังโฟลเดอร์ a / dist โฟลเดอร์ dist นี้ควรเป็นรูทของแอพของคุณบนโฮสติ้งของคุณ (ฉันยังไม่ได้ใช้ Vue2 แต่ฉันคิดว่ามันจะอยู่ที่นั่น)

— Swimburger

เฮ้พวกฉันมีพร็อบเดียวกันนี้เมื่อสัปดาห์ที่แล้วและเขียน smth ขึ้นมาว่ามันช่วยใครได้บ้าง

— sawickcode

ฉันได้อัปโหลดไฟล์จากโฟลเดอร์ dist ไปยัง cpanel แล้ว แต่มันแสดงเป็นช่องว่างเท่านั้น

— Fayaz

171

ฉันคิดว่าคุณได้สร้างโครงการของคุณในลักษณะนี้:

vue init webpack myproject

ตอนนี้คุณสามารถวิ่งได้แล้ว

npm run build

คัดลอก index.html และ / dist / โฟลเดอร์ลงในไดเรกทอรีรากของเว็บไซต์ของคุณ เสร็จสิ้น

— Egor Stambakio
แหล่งที่มา

1

ไม่จำเป็นต้องวิ่งnpm startหรืออะไรแบบนี้?

— nu everest

@nueverest หากคุณเพิ่งสร้างโครงการกับvue init webpack myprojectคุณจะเห็นคำแนะนำเพิ่มเติมในคอนโซลของคุณ: cd myproject, npm install. หลังจากnpm installดาวน์โหลดแพ็กเกจทั้งหมดแล้วและ vue สามารถคอมไพล์กับnpm run devเซิร์ฟเวอร์สำหรับการพัฒนา + รีโหลดแบบร้อนหรือด้วยnpm run buildเพื่อสร้างบันเดิลที่ปรับใช้งานได้

— Egor Stambakio

ดูเหมือนจะใช้ไม่ได้กับเราเตอร์ vue ... ฉันทำอะไรผิดหรือเปล่า?

— Andy Hayden

1

@AndyHayden AWS S3 ตรวจสอบว่า 1) ดัชนี & เอกสารข้อผิดพลาด === index.html; 2) นโยบายมีการตั้งค่าสำหรับเว็บไซต์แบบคงที่ ; 3) ของคุณbuild.jsอยู่ภายในdistโฟลเดอร์บน s3 และindex.htmlอยู่ในรูท

— Egor Stambakio

9

คำตอบควรเป็น "เนื้อหาของdistโฟลเดอร์คือทั้งหมดที่คุณต้องการคุณไม่จำเป็นต้องคัดลอก/index.htmlแต่ต้องใช้เฉพาะindex.htmlในdistโฟลเดอร์เท่านั้นนอกจากนี้ก่อนที่จะเรียกใช้npm run buildคุณควรกำหนดค่าเส้นทางการผลิตของคุณในconfig/index.js"

— David 天宇 Wong

24

หากคุณสร้างโครงการโดยใช้:

vue init webpack myproject

คุณต้องตั้งค่าNODE_ENVเป็นใช้งานจริงและดำเนินการเนื่องจากโครงการมีการกำหนดค่าเว็บแพ็คสำหรับทั้งการพัฒนาและการผลิต:

NODE_ENV=production npm run build

คัดลอกdist/ไดเรกทอรีไปยังไดเรกทอรีรากของเว็บไซต์ของคุณ

หากคุณกำลังปรับใช้กับ Docker คุณต้องมีเซิร์ฟเวอร์ด่วนที่ให้บริการdist/ไดเร็กทอรี

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" ]

— akinjide
แหล่งที่มา

คุณเปิดเผยคอนเทนเนอร์นั้นสู่ภายนอกหรือคุณใช้ nginx หรือ apache เป็นพร็อกซี?

— Hakim

ใช่คุณใช้ Apache หรือ Nginx เป็นพร็อกซีพอร์ต 80

— akinjide

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app ได้ WORKDIR / app? CMD ["http-server", "dist"] จำเป็นสำหรับการแสดงผลผ่านเซิร์ฟเวอร์ http ด้วยหรือไม่ แทนที่จะเป็น CMD ["npm", "start"]

— LOG_TAG

เวอร์ชัน: webpack 3.12.0 เวลา: 16548ms ขนาดเนื้อหา Chunks Chunk Names build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main - สิ่งนี้จะปรากฏขึ้นหลังจากเรียกใช้ cmd ด้านบนในโปรเจ็กต์ โฟลเดอร์ - คุณช่วยแนะนำฉันตลอดขั้นตอนต่อไปเพื่อเข้าสู่ชีวิตจริงได้ไหม -

— รัศมีดาราอาทิตย์

7

ในเทอร์มินัลของคุณ

npm run build

และคุณโฮสต์โฟลเดอร์ dist สำหรับข้อมูลเพิ่มเติม โปรดดูวิดีโอนี้

— anasmorahhib
แหล่งที่มา

สิ่งนี้ถือว่าสคริปต์สร้างมีอยู่ใน package.json อย่างไม่ถูกต้อง

— พังสปริงฟิลด์

4

@crashspringfield สมมติฐานที่ถูกต้องที่จะทำเมื่อ OP ถามโดยเฉพาะเกี่ยวกับแอปพลิเคชัน Vue ที่สร้างด้วยvue-cli

— Dan Fletcher

4

หากคุณประสบปัญหากับเส้นทางของคุณคุณอาจต้องเปลี่ยนassetPublicPathในconfig/index.jsไฟล์ของคุณเป็นไดเร็กทอรีย่อยของคุณ:

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

— jntme
แหล่งที่มา

อย่าลืมเปลี่ยน build: {..... assetsPublicPath: './' ซึ่งจุดก่อนเครื่องหมายทับจะมีความสำคัญ แต่มี assetsPublinPath อยู่ในวัตถุ dev ในไฟล์นั้นด้วยดังนั้นอย่าลืมเปลี่ยนรายการที่ถูกต้อง

— Shane G

เวอร์ชัน: webpack 3.12.0 เวลา: 16548ms ขนาดเนื้อหา Chunks Chunk Names build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main - สิ่งนี้จะปรากฏขึ้นหลังจากเรียกใช้ cmd ด้านบนในโปรเจ็กต์ โฟลเดอร์ - คุณช่วยแนะนำฉันตลอดขั้นตอนต่อไปเพื่อเข้าสู่ชีวิตจริงได้ไหม -

— รัศมีดาราอาทิตย์

2

คำสั่งสำหรับรหัสเฉพาะที่จะรันแสดงอยู่ในไฟล์ package.json ของคุณภายใต้สคริปต์ นี่คือตัวอย่างของฉัน:

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

หากคุณต้องการเรียกใช้ไซต์ของคุณในพื้นที่คุณสามารถทดสอบได้ด้วย

npm serve

หากคุณต้องการเตรียมไซต์ของคุณสำหรับการผลิตคุณควรใช้

npm build

คำสั่งนี้จะสร้างโฟลเดอร์ dist ที่มีไซต์ของคุณในเวอร์ชันบีบอัด

— ยีน Yllanes
แหล่งที่มา

1

ในการปรับใช้แอปพลิเคชันของคุณเพื่อเพิ่มสภาพแวดล้อม prod

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

ในสคริปต์ของคุณในไฟล์ package.json

เปิด main.js ของคุณแล้วเพิ่ม

Vue.config.productionTip = false;

ทันทีหลังจากการนำเข้าของคุณ จากนั้นเปิด cli ของคุณในโฟลเดอร์โครงการและเรียกใช้คำสั่งนี้

npm run build

สิ่งนี้จะทำให้โฟลเดอร์ dist ในไดเร็กทอรีโปรเจ็กต์ของคุณคุณสามารถอัปโหลดโฟลเดอร์ dist นั้นในโฮสต์ของคุณและเว็บไซต์ของคุณจะพร้อมใช้งาน

— MaBbKhawaja
แหล่งที่มา

1

เอกสาร vue ให้ข้อมูลมากมายเกี่ยวกับวิธีปรับใช้กับผู้ให้บริการโฮสต์รายต่างๆ

npm run build

คุณสามารถค้นหาสิ่งนี้ได้จากไฟล์แพคเกจ json ส่วนสคริปต์ มีสคริปต์สำหรับการทดสอบและพัฒนาและสร้างสำหรับการผลิต

คุณสามารถใช้บริการต่างๆเช่น netlify ซึ่งจะรวมโปรเจ็กต์ของคุณโดยการเชื่อมโยง github repo ของโปรเจ็กต์จากไซต์ของพวกเขา นอกจากนี้ยังให้ข้อมูลเกี่ยวกับวิธีการปรับใช้บนไซต์อื่น ๆ เช่น heroku

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

— Brian Mwangi
แหล่งที่มา

การทำเช่นนี้จะสร้างโฟลเดอร์ dist ที่มี JS / CSS และ HTML ที่รวมไว้เพื่อให้ใช้งานได้ง่ายในบริการโฮสติ้งใด ๆ

— Tyler Morales

0

คำสั่งนี้ใช้สำหรับเริ่มต้นเซิร์ฟเวอร์การพัฒนา:

npm run dev

โดยที่คำสั่งนี้ใช้สำหรับบิลด์การผลิต:

npm run build

อย่าลืมดูและเข้าไปในโฟลเดอร์ที่สร้างขึ้นชื่อ 'dist'
จากนั้นเริ่มพุชไฟล์เหล่านั้นทั้งหมดไปยังเซิร์ฟเวอร์ของคุณ

— Farcrew Rz
แหล่งที่มา

0

วิธีหนึ่งในการทำเช่นนี้โดยไม่ใช้ VUE-CLI คือการรวมไฟล์สคริปต์ทั้งหมดไว้ในไฟล์ fat js ไฟล์เดียวจากนั้นอ้างอิงไฟล์ javascript ที่มีไขมันขนาดใหญ่เป็นไฟล์เทมเพลตหลัก

ฉันชอบใช้ webpack เป็นบันเดิลเลอร์และสร้าง webpack.conig.js ในไดเร็กทอรีรูทของโปรเจ็กต์ การกำหนดค่าทั้งหมดเช่นจุดเข้าไฟล์เอาต์พุตตัวโหลด ฯลฯ ทั้งหมดจะถูกเก็บไว้ในไฟล์กำหนดค่านั้น หลังจากนั้นฉันเพิ่มสคริปต์ในไฟล์ package.json ที่ใช้ไฟล์ webpack.config.js สำหรับการกำหนดค่า webpack และเริ่มดูไฟล์และสร้างไฟล์ที่รวม Js ในตำแหน่งที่กล่าวถึงในไฟล์ webpack.config.js

— Yash_6795
แหล่งที่มา

0

ฉันคิดว่าคุณสามารถใช้ vue-cli

หากคุณใช้ Vue CLI ร่วมกับแบ็กเอนด์เฟรมเวิร์กที่จัดการกับสินทรัพย์คงที่เป็นส่วนหนึ่งของการปรับใช้สิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่า Vue CLI สร้างไฟล์ที่สร้างขึ้นในตำแหน่งที่ถูกต้องจากนั้นทำตามคำแนะนำในการปรับใช้ของเฟรมเวิร์กแบ็กเอนด์ของคุณ .

หากคุณกำลังพัฒนาแอปส่วนหน้าแยกจากแบ็กเอนด์กล่าวคือแบ็กเอนด์ของคุณจะเปิดเผย API สำหรับส่วนหน้าเพื่อพูดคุยด้วยส่วนหน้าของคุณจะเป็นแอปที่คงที่โดยสิ้นเชิง คุณสามารถปรับใช้เนื้อหาที่สร้างขึ้นในไดเร็กทอรี dist ไปยังเซิร์ฟเวอร์ไฟล์แบบคงที่ใดก็ได้ แต่ตรวจสอบให้แน่ใจว่าได้ตั้งค่า baseUrl ที่ถูกต้อง

— Loveun CG
แหล่งที่มา

คุณพูดถูก แต่ในขณะที่คำตอบที่ได้รับการยอมรับแสดงให้เห็นคำถามเกี่ยวกับคำสั่งที่จะรันหลังจากนั้น

— JR Utily

0

npm รันบิลด์ - สิ่งนี้จะอัปลักษณ์และย่อโค้ด
บันทึก index.html และโฟลเดอร์ dist ในไดเรกทอรีรากของเว็บไซต์ของคุณ
บริการโฮสติ้งฟรีที่คุณอาจสนใจ - โฮสติ้ง Firebase

0

หากคุณใช้ vue-cli และ webpack เมื่อคุณสร้างโครงการของคุณ

คุณสามารถใช้เพียง

npm รันคำสั่งbuildในบรรทัดคำสั่งและจะสร้างโฟลเดอร์ dist ในโปรเจ็กต์ของคุณ เพียงแค่อัปโหลดเนื้อหาของโฟลเดอร์นี้ไปยัง ftp ของคุณและเสร็จสิ้น

— user3348410
แหล่งที่มา

เพียงแค่อัปโหลดโฟลเดอร์ dist ไปยัง ftp ของคุณและทำเสร็จแล้ว? & วิธีการเข้าถึงแล้ว Vue app บนเซิร์ฟเวอร์?

— Hamendra Sunthwal

0

นี่มีไว้เพื่อใช้กับโฟลเดอร์ที่กำหนดเอง (หากคุณต้องการให้แอปของคุณไม่อยู่ในรูทเช่น URL / myApp /) - ฉันมองหาคำตอบนี้มานาน ... หวังว่ามันจะช่วยใครบางคนได้

รับ VUE CLI ที่https://cli.vuejs.org/guide/และใช้ UI build เพื่อให้ง่าย จากนั้นในการกำหนดค่าคุณสามารถเปลี่ยนเส้นทางสาธารณะเป็น / อะไรก็ได้ / และเชื่อมโยงไปยัง URL / อะไรก็ได้

ดูวิดีโอนี้ซึ่งอธิบายวิธีสร้างแอป vue โดยใช้ CLI หากคุณต้องการความช่วยเหลือเพิ่มเติม: https://www.youtube.com/watch?v=Wy9q22isx3U

— ริกเค
แหล่งที่มา

0

ติดตั้ง Vue Cli ทั่วโลกก่อน

npm install -g @vue/cli

ในการสร้างโครงการใหม่ให้เรียกใช้:

vue create project-name

เรียกใช้ vue

npm run serve

Vue CLI> = 3 ใช้ vue ไบนารีเดียวกันดังนั้นจึงเขียนทับ Vue CLI 2 (vue-cli) หากคุณยังต้องการฟังก์ชัน vue init แบบเดิมคุณสามารถติดตั้ง global bridge ได้:

Vue Init ทั่วโลก

npm install -g @vue/cli-init

vue init ทำงานเหมือนกับ vue-cli@2.x

Vue สร้างแอป

vue init webpack my-project

เรียกใช้เซิร์ฟเวอร์นักพัฒนา

npm run dev

— นพ. จามิลเอเจ
แหล่งที่มา

-1

หากคุณต้องการสร้างและส่งไปยังเซิร์ฟเวอร์ระยะไกลของคุณคุณสามารถใช้ cli-service ( https://cli.vuejs.org/guide/cli-service.html ) คุณสามารถสร้างงานเพื่อให้บริการสร้างและอีกหนึ่งงานเพื่อปรับใช้กับบางส่วน ปลั๊กอินเฉพาะเป็นvue-cli-plugin-s3-deploy

— กิลสันดอยจูเนียร์
แหล่งที่มา

จะปรับใช้แอป Vue ได้อย่างไร

vue init ทำงานเหมือนกับ vue-cli@2.x