131

Vue ऐप विकसित करने के बाद मुझे क्या करना चाहिए vue-cli?

में कोणीय कुछ आदेश है कि एक ही स्क्रिप्ट में सभी स्क्रिप्ट बंडल था, और उसके बाद इन फ़ाइलों की मेजबानी के लिए भेजा जाता है।

क्या Vue में भी कुछ ऐसा ही है ?

vue.js vuejs2 vue-cli

— artem0071
स्रोत

यह cli का हिस्सा होना चाहिए, यहाँ तैनाती doc पृष्ठ vuejs.org/v2/guide/dep तैनाती. html आपके पास किस संस्करण पर निर्भर करता है, आप किस टेम्पलेट का उपयोग करते हैं, यह शायद थोड़ा अलग होगा। लेकिन आपको यह निर्दिष्ट करना चाहिए कि आप डॉक्स जैसे निर्माण का निर्माण कर रहे हैं।

— स्विमबर्गर

2

मैं 2.2.1 वीयू का उपयोग करता हूं। मैं प्रलेखन देखता हूं, लेकिन तैनाती के बारे में कोई जानकारी नहीं है। मैं होस्टर पर नोडज का उपयोग नहीं कर रहा हूं। इसलिए जब मैं इसे लोकलहोस्ट में शुरू करता हूं तो यह काम करता है, लेकिन जब मैं होस्ट करने के लिए सभी फाइलें डाउनलोड करता हूं, तो पेज पर कुछ भी नहीं होता है

— Artem0071

8

जब आप एक बिल्ड करते हैं, तो यह संभवतः सभी फाइलों (html, css, js) को / डिस्टर्ब फोल्डर में संकलित करेगा। यह डिस्ट फ़ोल्डर आपके होस्टिंग पर आपके ऐप का मूल होना चाहिए। (मैं अभी तक Vue2 का उपयोग नहीं किया है, लेकिन मुझे यकीन है कि यह वहाँ होगा)

— Swimburger

अरे लोग मैं पिछले हफ्ते इस एक ही समस्या थी और ऊपर ख़ाली अगर यह किसी को भी मदद करता है लिखा है: medium.com/@seenickcode/...

— seenickcode

मैंने डिस्ट फ़ोल्डर से फाइल को cpanel में अपलोड किया है, लेकिन यह केवल रिक्त दिखाई दे रहा है

— Fayaz

171

मुझे लगता है कि आपने अपनी परियोजना इस तरह बनाई है:

vue init webpack myproject

अच्छा, अब तुम दौड़ सकते हो

npm run build

अपनी वेबसाइट रूट डायरेक्टरी में index.html और / dist / फोल्डर को कॉपी करें। किया हुआ।

— Egor Stambakio
स्रोत

1

क्या npm startइस तरह से चलाने या कुछ भी करने की आवश्यकता नहीं है ?

— न्यू एवरेस्ट

@nueverest अगर आपने अभी-अभी अपना प्रोजेक्ट बनाया है तो आपको vue init webpack myprojectअपने कंसोल में और निर्देश दिखाई देंगे: cd myproject, npm install। npm installसभी पैकेजों को डाउनलोड करने के बाद और vue npm run devडेवलपमेंट सर्वर + हॉट रीलोड के npm run buildलिए या एक परिनियोजित बंडल बनाने में सक्षम है।

— ईगोर स्टैम्बकियो

यह वाउ राउटर के साथ काम नहीं करता है ... क्या मैं कुछ गलत कर रहा हूं?

— एंडी हेडन

1

@AndyHayden AWS S3 की जाँच करें यदि 1) इंडेक्स और एरर डॉक्यूमेंट === index.html; 2) नीतियां स्थिर वेबसाइट के लिए निर्धारित की जाती हैं ; 3) आपका s3 पर फ़ोल्डर के build.jsअंदर है dist, और index.htmlरूट में है।

— ईगोर स्टैम्बकियो

9

इस सवाल का जवाब होना चाहिए "की सामग्री को distफ़ोल्डर आप सभी की जरूरत है। आप को कॉपी करने की जरूरत नहीं है /index.html, लेकिन केवल index.htmlमें distफ़ोल्डर की जरूरत है। इसके अलावा, चलाने से पहले npm run buildआप अपने उत्पादन पथ कॉन्फ़िगर करना चाहिए config/index.js"।

— डेविड David वोंग

24

यदि आपने अपना प्रोजेक्ट बनाया है:

vue init webpack myproject

आपको अपने NODE_ENVउत्पादन और चलाने के लिए सेट करना होगा , क्योंकि परियोजना में विकास और उत्पादन दोनों के लिए वेब पैक कॉन्फ़िगर किया गया है:

NODE_ENV=production npm run build

dist/निर्देशिका को अपनी वेबसाइट की निर्देशिका में कॉपी करें।

यदि आप डॉकर के साथ तैनाती कर रहे हैं, तो आपको 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
स्रोत

क्या आप उस कंटेनर को बाहर निकालते हैं या आप प्रॉक्सी के रूप में नगनेक्स या अपाचे का उपयोग करते हैं?

— हकीम

हाँ, आप अपाचे या

— नग्नेक्स

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app कार्य / ऐप हो सकता है? http सर्वर के माध्यम से सेवा के लिए CMD ["http-server", "dist"] की भी आवश्यकता है? CMD ["npm", "start"] के

— बजाय

संस्करण: वेबपैक ३.१२.० समय: १६५४ web मी एसेट साइज़ चंक्स नाम बिल्ड बिल्ड। जेएस २.१५ एमबी ० [उत्सर्जित] [बड़ा] मुख्य बिल्ड.जेसमैप MB ९ .४४ एमबी ० [उत्सर्जित] मुख्य - यह उपर्युक्त cmd को प्रोजेक्ट में चलाने के बाद आता है। फ़ोल्डर - क्या आप मुझे जीने के लिए अगले कदम के माध्यम से मार्गदर्शन कर सकते हैं? -

— हमेन्द्र सुनथवाल

7

अपने टर्मिनल में

npm run build

और आप डिस्टर्ब फोल्डर को होस्ट करते हैं। इस वीडियो को और देखने के लिए

— anasmorahhib
स्रोत

यह गलत तरीके से मानती है कि बिल्ड स्क्रिप्ट पैकेज.जॉन में मौजूद है।

— क्रैश स्प्रिंगफील्ड

4

@crashspringfield जब ओपी विशेष रूप से एक वीयू एप्लीकेशन के बारे में पूछ रहा है, तो बनाने के लिए एक सटीक धारणाvue-cli

— दान फ्लेचर

4

यदि आप अपने रास्ते की समस्याओं में भाग लेते हैं, तो शायद आपको assetPublicPathअपनी config/index.jsफ़ाइल को अपनी उप-निर्देशिका में बदलने की आवश्यकता है :

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

— jntme
स्रोत

बिल्ड बदलने के लिए सुनिश्चित करें: {..... एसेट्सपब्लिकपैथ: './', फॉरवर्ड स्लैश से पहले डॉट्स महत्वपूर्ण है। लेकिन उस फ़ाइल में भी देव ऑब्जेक्ट में एक संपत्तिपब्लिनपाथ है, इसलिए सही एक को बदलना सुनिश्चित करें।

— शेन जी

संस्करण: वेबपैक ३.१२.० समय: १६५४ web मी एसेट साइज़ चंक्स नाम बिल्ड बिल्ड। जेएस २.१५ एमबी ० [उत्सर्जित] [बड़ा] मुख्य बिल्ड.जेसमैप MB ९ .४४ एमबी ० [उत्सर्जित] मुख्य - यह उपर्युक्त cmd को प्रोजेक्ट में चलाने के बाद आता है। फ़ोल्डर - क्या आप मुझे जीने के लिए अगले कदम के माध्यम से मार्गदर्शन कर सकते हैं? -

— हमेन्द्र सुनथवाल

2

क्या विशिष्ट कोड चलाने के लिए आदेश स्क्रिप्ट के तहत अपने package.json फ़ाइल के अंदर सूचीबद्ध हैं। यहाँ मेरा एक उदाहरण है:

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

यदि आप अपनी साइट को स्थानीय रूप से चलाना चाहते हैं, तो आप इसके साथ परीक्षण कर सकते हैं

npm serve

यदि आप अपनी साइट को उत्पादन के लिए तैयार करना चाहते हैं, तो आप उपयोग करेंगे

npm build

यह कमांड एक डिस्टर्ब फोल्डर उत्पन्न करेगा जिसमें आपकी साइट का एक संपीड़ित संस्करण है।

— जीन येलनेस
स्रोत

1

ठेस पर्यावरण जोड़ने के लिए अपने आवेदन को तैनात करने के लिए

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

अपनी स्क्रिप्ट में package.json फ़ाइल में।

अपने main.js खोलें और जोड़ें

Vue.config.productionTip = false;

अपने आयात के बाद सही है। फिर प्रोजेक्ट फ़ोल्डर में अपनी cli खोलें और इस कमांड को रन करें

npm run build

यह आपके प्रोजेक्ट डायरेक्टरी में एक डिस्टर्ब फोल्डर बना देगा जिसे आप अपने होस्ट में उस डिस्टर्ब फोल्डर को अपलोड कर सकते हैं और आपकी वेबसाइट लाइव हो जाएगी

— MaBbKhawaja
स्रोत

0

यह कमांड डेवलपमेंट सर्वर शुरू करने के लिए है:

npm run dev

जहां यह कमांड प्रोडक्शन बिल्ड के लिए है:

npm run build

'डिस्ट' नामक जेनरेट किए गए फोल्डर के अंदर देखना और जाना सुनिश्चित करें।
फिर उन सभी फाइलों को अपने सर्वर पर धकेलना शुरू करें।

— फरज आरज़
स्रोत

0

VUE-CLI का उपयोग किए बिना ऐसा करने का एक तरीका सभी स्क्रिप्ट फ़ाइलों को एक वसा js फ़ाइल में बंडल करना है और फिर उस बड़ी वसा जावास्क्रिप्ट फ़ाइल को मुख्य टेम्पलेट फ़ाइल में संदर्भित करना है।

मैं एक बंडल के रूप में वेबपैक का उपयोग करना पसंद करता हूं और परियोजना के रूट डायरेक्टरी में एक webpack.conig.js बनाता हूं। सभी कॉन्फिगर जैसे कि एंट्री पॉइंट, आउटपुट फाइल, लोडर वगैरह .. सभी उस कॉन्फिगर फाइल में स्टोर हो जाते हैं। उसके बाद, मैं package.json फ़ाइल में एक स्क्रिप्ट जोड़ता हूं जो webpack config के लिए webpack.config.js फ़ाइल का उपयोग करता है और फ़ाइलों को देखना शुरू करता है और Webpack.config.js फ़ाइल में उल्लिखित स्थान पर एक Js बंडल फ़ाइल बनाता है।

— Yash_6795
स्रोत

0

मुझे लगता है कि आप vue-cli का उपयोग कर सकते हैं

यदि आप एक बैकएंड फ्रेमवर्क के साथ Vue CLI का उपयोग कर रहे हैं जो स्थिर तैनाती को अपनी तैनाती के हिस्से के रूप में संभालता है, तो आपको केवल यह सुनिश्चित करने की आवश्यकता है कि Vue CLI बिल्ट की गई फ़ाइलों को सही स्थान पर उत्पन्न करता है, और फिर अपने बैकएंड फ्रेमवर्क की तैनाती निर्देश का पालन करें। ।

यदि आप अपने बैकएंड से अलग से अपने फ्रंटएंड ऐप को विकसित कर रहे हैं - यानी आपका बैकएंड आपके फ्रंटएंड से बात करने के लिए एक एपीआई को उजागर करता है, तो आपका सीमांत अनिवार्य रूप से एक विशुद्ध रूप से स्थिर ऐप है। आप निर्मित सामग्री को किसी भी स्थिर फ़ाइल सर्वर के लिए डायरेक्ट डायरेक्टरी में तैनात कर सकते हैं, लेकिन सही बेसयूआर सेट करना सुनिश्चित करें

— लवुन सीजी
स्रोत

आप सही हैं, लेकिन स्वीकार किए गए उत्तर शो के रूप में, यह सवाल था कि किस कमांड के बाद चलना है

— JR Utily

0

npm रन बिल्ड - यह कोडों को बदसूरत और छोटा करेगा
अपनी वेबसाइट के रूट डायरेक्टरी में index.html और dist फोल्डर को सेव करें।
मुफ्त होस्टिंग सेवा है कि आप में रुचि हो सकती है - Firebase होस्टिंग।

0

यदि आपने अपना प्रोजेक्ट बनाते समय vue-cli और webpack का उपयोग किया है।

आप बस का उपयोग कर सकते हैं

npm रन बिल्ड कमांड इन कमांड लाइन, और यह आपके प्रोजेक्ट में डिस्टर्ब फोल्डर बनाएगा। बस इस फ़ोल्डर की सामग्री को अपने FTP और अपलोड करें।

— user3348410
स्रोत

बस अपने FTP के लिए डिस्ट फ़ोल्डर अपलोड करें और किया? और फिर सर्वर पर Vue ऐप कैसे एक्सेस करें?

— हमेंद्र सुनथवाल

0

यह एक कस्टमर के लिए आवेदन करने के लिए है (यदि आप अपना ऐप रूट में नहीं चाहते थे, जैसे URL / myApp /) - मैंने इस उत्तर को खोजने के लिए लंबे समय तक देखा ... आशा है कि यह किसी की मदद करता है।

Vc CLI को https://cli.vuejs.org/guide/ पर प्राप्त करें और इसे आसान बनाने के लिए UI बिल्ड का उपयोग करें। फिर कॉन्फ़िगरेशन में आप सार्वजनिक पथ को / जो / और इसे URL / लिंक से लिंक कर सकते हैं।

इस वीडियो को देखें जिसमें बताया गया है कि कैसे यूएलआई को अधिक मदद की जरूरत है तो सीएलआई का उपयोग करके एक वीयू ऐप बनाएं: https://www.youtube.com/watch?v=Wy9q22isx3U

— रिक के।
स्रोत

0

Vue प्रलेखन इस पर बहुत सी जानकारी प्रदान करता है कि आप विभिन्न होस्ट प्रदाताओं को कैसे तैनात कर सकते हैं।

npm run build

आप पैकेज json फ़ाइल से यह पा सकते हैं। स्क्रिप्ट अनुभाग। यह उत्पादन के लिए परीक्षण और विकास और निर्माण के लिए स्क्रिप्ट प्रदान करता है।

आप netlify जैसी सेवाओं का उपयोग कर सकते हैं, जो आपकी साइट से परियोजना के अपने गितुब रेपो को जोड़कर आपकी परियोजना को बंडल करेगी। यह इस बात की भी जानकारी प्रदान करता है कि हरोकू जैसी अन्य साइटों पर कैसे तैनात किया जाए।

आप इस पर अधिक विवरण यहां पा सकते हैं

— ब्रायन मेवांगी
स्रोत

0

विश्व स्तर पर सबसे पहले Vue Cli को स्थापित करें

npm install -g @vue/cli

एक नई परियोजना बनाने के लिए, चलाएं:

vue create project-name

दौड़ना

npm run serve

Vue CLI> = 3 एक ही vue बाइनरी का उपयोग करता है, इसलिए यह Vue CLI 2 (vue-cli) को अधिलेखित करता है। यदि आपको अभी भी विरासत वाइट इनिट कार्यक्षमता की आवश्यकता है, तो आप एक वैश्विक पुल स्थापित कर सकते हैं:

Vue Init ग्लोबली

npm install -g @vue/cli-init

vue init अब vue-cli@2.x के समान कार्य करता है

Vue Create App

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 के समान कार्य करता है