কীভাবে ভ্যু অ্যাপ স্থাপন করা যায়?

Question

ভিউ অ্যাপ্লিকেশনটি তৈরি করার পরে আমার কী করা উচিতvue-cli ?

ইন কৌণিক কিছু কমান্ড যে এক একক স্ক্রিপ্ট সব স্ক্রিপ্ট বান্ডিল ছিল, এবং তারপর এই ফাইল হোস্ট পাঠানো হয়।

ভ্যূ - তেও কি কিছু আছে ?

Comments

এটি ক্লাইমের অংশ হওয়া উচিত, এখানে ডিপ্লোয়মেন্ট ডক পৃষ্ঠাগুলি vuejs.org/v2/guide/depدام.html আপনার কাছে কোন সংস্করণ রয়েছে, কোন টেমপ্লেট আপনি ব্যবহার করছেন তার উপর নির্ভর করে এটি সম্ভবত কিছুটা পৃথক হবে। তবে আপনাকে অবশ্যই উল্লেখ করতে হবে যে আপনি ডক্সের মতো একটি প্রোডাকশন বিল্ড করছেন।

— সুইমবার্গার

আমি 2.2.1 মান ব্যবহার করি। আমি ডকুমেন্টেশন দেখছি, কিন্তু স্থাপনার কোনও তথ্য নেই। আমি হোস্টারে নোডেজ ব্যবহার করছি না। সুতরাং যখন আমি লোকালহোস্টে এটি শুরু করি তখন এটি কাজ করে, কিন্তু যখন আমি হোস্টারে সমস্ত ফাইল ডাউনলোড করি তখন পৃষ্ঠায় কিছুই নেই

— artem0071

আপনি যখন কোনও বিল্ড করেন, সম্ভবত এটি সমস্ত ফাইল (এইচটিএমএল, সিএসএস, জেএস) একটি / ডিস ফোল্ডারে সংকলন করবে। এই ডিস্ট ফোল্ডারটি আপনার হোস্টিংয়ে থাকা আপনার অ্যাপ্লিকেশনের মূল হতে হবে। (আমি এখনও ভ্যু 2 ব্যবহার করি নি, তবে আমি বাজি রেখেছি এটি সেখানেই থাকবে)

— সুইমবার্গার

বন্ধুরা আমি গত সপ্তাহে এই একই PROB ছিল এবং আপ প্রস্তুত হত্তয়া যদি এটা যে কেউ সাহায্য করে লিখেছিলেন: medium.com/@seenickcode/...

— seenickcode

আমি ডিস ফোল্ডার থেকে সিপ্যানেলে ফাইলগুলি আপলোড করেছি, তবে এটি কেবল ফাঁকা দেখাচ্ছে

— ফায়াজ

Answer 1

আমি মনে করি আপনি আপনার প্রকল্পটি এর মতো তৈরি করেছেন:

vue init webpack myproject

ভাল, এখন আপনি চালাতে পারেন

npm run build

আপনার ওয়েবসাইটের মূল ডিরেক্টরিতে সূচক html এবং / ডিস্ট / ফোল্ডার অনুলিপি করুন। সম্পন্ন.

Comments

দৌড়ানোর দরকার নেই npm startবা এর মতো কিছু?

— nu everest

@ নিউভারেস্ট আপনি যদি সবেমাত্র আপনার প্রকল্পটি তৈরি করে থাকেন তবে vue init webpack myprojectআপনার কনসোলে আরও নির্দেশাবলী দেখতে পাবেন: cd myproject, npm install। npm installসমস্ত প্যাকেজ ডাউনলোড হয়ে গেলে এবং ভ্যু হয় npm run devডেভলপমেন্ট সার্ভার + হট রিলোডের জন্য, বা npm run buildএকটি ডিপ্লোয়েবল বান্ডেল তৈরি করতে সংকলন করতে সক্ষম হয় ।

— Egor Stambakio

এটি ভ্যু রাউটার দিয়ে কাজ করছে বলে মনে হচ্ছে না ... আমি কি কিছু ভুল করছি?

— অ্যান্ডি হেডেন

@ অ্যান্ডি হাইডেন একটি অ্যাডাব্লুএস এস 3 যাচাই করুন 1) সূচি এবং ত্রুটি নথি === ইনডেক্স এইচটিএমএল; 2) নীতিগুলি স্থির ওয়েবসাইটের জন্য সেট করা আছে ; 3) আপনার এস 3 এ ফোল্ডারের build.jsভিতরে রয়েছে distএবং মূলটিতে রয়েছে index.html।

— ডিম স্টাম্বাকিও

উত্তর হবে "বিষয়বস্তুর distফোল্ডারের আপনার প্রয়োজন হয়। আপনি কপি করতে প্রয়োজন হবে না /index.htmlকিন্তু শুধুমাত্র index.htmlমধ্যে distফোল্ডারের প্রয়োজন হয়। উপরন্তু, চলমান পূর্বে npm run buildআপনি আপনার উৎপাদন পথ কনফিগার করা উচিত config/index.js"।

— ডেভিড 天宇 ওয়াং

Answer 2

আপনি যদি আপনার প্রকল্পটি ব্যবহার করে তৈরি করে থাকেন:

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

Comments

আপনি কি সেই ধারকটি বাইরে থেকে প্রকাশ করেন বা আপনি প্রক্সি হিসাবে এনগিনেক্স বা অ্যাপাচি ব্যবহার করেন?

— হাকিম

হ্যাঁ, আপনি অ্যাপাচি বা

— এনগিনেক্সকে

পেস্ট.বুন্টু. com/p/ dryhSwnYh5 ওয়ার্কডিআর / usr / src / অ্যাপ্লিকেশন ওয়ার্কডির / অ্যাপ হতে পারে? এছাড়াও সিএমডি ["HTTP- সার্ভার", "ডিস্ট"] HTTP সার্ভারের মাধ্যমে পরিবেশন করার জন্য প্রয়োজন? সিএমডি এর পরিবর্তে ["এনপিএম", "শুরু করুন]]

— লোগ্যাগটি

সংস্করণ: ওয়েবপ্যাক ৩.১২.০ সময়: ১5৫৪৪ms সম্পদের আকার খণ্ড খণ্ড নামগুলি বিল্ড.জেএস ২.১৫ এমবি 0 [নিঃসৃত] [বড়] মূল বিল্ড। ফোল্ডার - আপনি দয়া করে লাইভে যেতে পরবর্তী পদক্ষেপের মাধ্যমে আমাকে গাইড করতে পারেন? -

— হামেন্দ্র সুন্তওয়াল

Answer 3

আপনার টার্মিনালে

npm run build

এবং আপনি ডিস্ট ফোল্ডারটি হোস্ট করেন। আরো জন্য এই ভিডিওটি দেখতে

Comments

এটি ভুলভাবে ধরে নিয়েছে যে একটি বিল্ড স্ক্রিপ্ট প্যাকেজ.জসনে রয়েছে।

— ক্রশ স্প্রিংফিল্ড

@ ক্র্যাশস্প্রিংফিল্ড যখন ওপি বিশেষত জিজ্ঞাসা করে তৈরি করা একটি ভ্যু অ্যাপ্লিকেশন সম্পর্কে জিজ্ঞাসা করছে তখন একটি সঠিক ধারণাvue-cli

— ড্যান ফ্লেচার

Answer 4

আপনি যদি আপনার পাথ নিয়ে সমস্যায় পড়ে assetPublicPathথাকেন তবে সম্ভবত আপনার config/index.jsফাইলের ফাইলটি আপনার উপ-ডিরেক্টরিতে পরিবর্তন করতে হবে :

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

Comments

বিল্ড: {..... অ্যাসেটসপাবলিকপথ: './' পরিবর্তন করুন তা নিশ্চিত করুন, ফরোয়ার্ড স্ল্যাশের আগে সেই বিন্দুগুলি গুরুত্বপূর্ণ। তবে সেই ফাইলটিতে ডেভ অবজেক্টে একটি সম্পদপब्लিনপথ রয়েছে, সুতরাং সঠিকটি পরিবর্তন করতে ভুলবেন না।

— শেন জি

সংস্করণ: ওয়েবপ্যাক ৩.১২.০ সময়: ১5৫৪৪ms সম্পদের আকার খণ্ড খণ্ড নামগুলি বিল্ড.জেএস ২.১৫ মেগাবাইট 0 [নির্গমনিত] [বড়] মূল বিল্ড.js.map 9.74 এমবি 0 [নির্গত] মূল - এটি উপরের সিএমডি প্রজেক্টে চালনার পরে আসে ফোল্ডার - আপনি দয়া করে লাইভে যেতে পরবর্তী পদক্ষেপের মাধ্যমে আমাকে গাইড করতে পারেন? -

— হামেন্দ্র সুন্তওয়াল

Answer 5

স্ক্রিপ্টগুলির অধীনে আপনার প্যাকেজ.জসন ফাইলের মধ্যে কী নির্দিষ্ট কোডগুলি পরিচালনা করতে হবে তার নির্দেশগুলি তালিকাভুক্ত রয়েছে। এখানে আমার একটি উদাহরণ:

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

আপনি যদি স্থানীয়ভাবে আপনার সাইটটি চালাতে চান তবে আপনি এটি দিয়ে পরীক্ষা করতে পারেন

npm serve

আপনি যদি প্রোডাক্টের জন্য আপনার সাইটটি প্রস্তুত করতে চান তবে আপনি এটি ব্যবহার করবেন

npm build

এই কমান্ডটি এমন একটি ফোল্ডার তৈরি করবে যা আপনার সাইটের সংকীর্ণ সংস্করণ রয়েছে।

Answer 6

আপনার অ্যাপ্লিকেশনটিকে পরিবেশগত অ্যাডে উন্নত করতে

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

প্যাকেজ.জসন ফাইলে আপনার স্ক্রিপ্টগুলিতে।

আপনার main.js খুলুন এবং যুক্ত করুন

Vue.config.productionTip = false;

ঠিক আপনার আমদানির পরে। তারপরে প্রজেক্ট ফোল্ডারে আপনার ক্লিপটি খুলুন এবং এই আদেশটি চালান run

npm run build

এটি আপনার প্রকল্প ডিরেক্টরিতে একটি বিস্তৃত ফোল্ডার তৈরি করবে আপনি সেই হোস্টে ডিস্ট ফোল্ডারটি আপলোড করতে পারেন এবং আপনার ওয়েবসাইটটি লাইভ হবে

Answer 7

এই আদেশটি বিকাশ সার্ভার শুরু করার জন্য:

npm run dev

এই আদেশটি উত্পাদন তৈরির জন্য যেখানে:

npm run build

'ডিস্ট' নামক উত্পাদিত ফোল্ডারের সন্ধান এবং তার ভিতরে যাওয়ার বিষয়টি নিশ্চিত করুন।
তারপরে আপনার সার্ভারে এই সমস্ত ফাইল টিপুন।

Answer 8

ভিইউইউ-সিএলআই ব্যবহার না করে এটি করার একটি উপায় হ'ল সমস্ত স্ক্রিপ্ট ফাইলগুলিকে একটি ফ্যাট জেএস ফাইলের মধ্যে বান্ডিল করা এবং তারপরে সেই বড় ফ্যাট জাভাস্ক্রিপ্ট ফাইলটিকে প্রধান টেমপ্লেট ফাইলে উল্লেখ করা।

আমি প্রকল্পের মূল ডিরেক্টরিতে ওয়েবপ্যাকটি বান্ডলার হিসাবে ব্যবহার করতে এবং একটি ওয়েবপ্যাক.conig.js তৈরি করতে পছন্দ করি। সমস্ত কনফিগার যেমন এন্ট্রি পয়েন্ট, আউটপুট ফাইল, লোডার ইত্যাদি .. সমস্ত কনফিগারেশনের ফাইলটিতে সংরক্ষিত আছে। এর পরে, আমি প্যাকেজ.জসন ফাইলে একটি স্ক্রিপ্ট যুক্ত করি যা ওয়েবপ্যাক কনফিগারেশনের জন্য ওয়েবপ্যাক.কনফিগ.জেএস ফাইল ব্যবহার করে এবং ফাইলগুলি দেখা শুরু করে এবং ওয়েবপ্যাক.কনফিগ.জেএস ফাইলটিতে উল্লিখিত স্থানে একটি জেএস বান্ডিল ফাইল তৈরি করে।

Answer 9

আমি মনে করি আপনি ভ্যু-ক্লিপ ব্যবহার করতে পারেন

যদি আপনি ব্যাকএন্ড কাঠামোর পাশাপাশি ভায়ু সিএমআই ব্যবহার করছেন যা স্থিতিশীল সম্পদগুলিকে তার মোতায়েনের অংশ হিসাবে পরিচালনা করে, আপনার যা করার দরকার তা হ'ল ভিলু সি এলআই সঠিক স্থানে নির্মিত ফাইলগুলি জেনারেট করে, এবং তারপরে আপনার ব্যাকএন্ড ফ্রেমওয়ার্কের স্থাপনার নির্দেশ অনুসরণ করুন ।

আপনি যদি আপনার ব্যাকএন্ড থেকে আলাদাভাবে আপনার ফ্রন্টএন্ড অ্যাপ্লিকেশন বিকাশ করছেন - যেমন আপনার ব্যাকএন্ড আপনার সীমান্তের সাথে কথা বলার জন্য একটি এপিআই প্রকাশ করে, তবে আপনার সম্মুখভাগটি মূলত একটি খাঁটি স্থির অ্যাপ্লিকেশন। আপনি কোনও স্থিতিশীল ফাইল সার্ভারে ডিস্ট ডিরেক্টরিতে অন্তর্নির্মিত সামগ্রীটি স্থাপন করতে পারেন তবে সঠিক বেসউআরএল সেট করা নিশ্চিত করে নিন

Comments

আপনি ঠিক বলেছেন, তবে গৃহীত উত্তর শো হিসাবে, প্রশ্নটি ছিল যে কোন আদেশের পরে চলতে হবে

— জেআর ইউটিলি

Answer 10

1. এনপিএম রান বিল্ড - এটি কোডগুলিকে অগলিফাই করবে এবং মাইনাইফ করবে

2. আপনার ওয়েবসাইটের মূল ডিরেক্টরিতে index.html এবং dist ফোল্ডারটি সংরক্ষণ করুন।

3. ফ্রি হোস্টিং পরিষেবা যা আপনার আগ্রহী হতে পারে - ফায়ারবেস হোস্টিং।

Answer 11

আপনি যখন আপনার প্রকল্পটি তৈরি করেছেন আপনি যদি ভ্যু-ক্লিপ এবং ওয়েবপ্যাক ব্যবহার করেন।

আপনি ঠিক ব্যবহার করতে পারেন

কমান্ড লাইনে এনএমপি বিল্ড কমান্ড রান করুন এবং এটি আপনার প্রকল্পে ডিস্ট ফোল্ডার তৈরি করবে। এই ফোল্ডারটির সামগ্রীটি কেবল আপনার এফটিপি এবং আপলোড করুন।

Comments

স্রেফ আপনার এফটিপিতে ডিস্ট ফোল্ডার আপলোড করবেন এবং হয়ে গেলেন? এবং কীভাবে সার্ভারে ভ্যু অ্যাপ্লিকেশনটি অ্যাক্সেস করবেন?

— হামেন্দ্র সুন্তওয়াল

Answer 12

এটি একটি কাস্টম ফোল্ডারের শনাক্ত করার জন্য (যদি আপনি নিজের অ্যাপটি মূলের মধ্যে না চেয়ে থাকেন, যেমন ইউআরএল / মাই অ্যাপ /) - এই উত্তরটি খুঁজে পেতে আমি দীর্ঘ সময় চেয়েছিলাম ... আশা করি এটি কারও সাহায্য করবে।

Https://cli.vuejs.org/guide/ এ VUE CLI পান এবং ইউআই বিল্ডটি এটি সহজ করার জন্য ব্যবহার করুন। তারপরে কনফিগারেশনে আপনি পাবলিক পাথটি / যাই হোক না কেন / এবং এতে ইউআরএল / যে কোনও কিছুতে লিঙ্ক করতে পারেন।

এই ভিডিওটি দেখুন যা আপনার আরও সহায়তার প্রয়োজন হলে CLI ব্যবহার করে কীভাবে একটি ভ্যু অ্যাপ তৈরি করতে হবে তা ব্যাখ্যা করে: https://www.youtube.com/watch?v=Wy9q22isx3U

Answer 13

আপনি কীভাবে বিভিন্ন হোস্ট সরবরাহকারীকে মোতায়েন করতে পারেন তার উপর ভ্যু ডকুমেন্টেশনটি প্রচুর তথ্য সরবরাহ করে।

npm run build

আপনি এটি প্যাকেজ জেসন ফাইল থেকে খুঁজে পেতে পারেন। স্ক্রিপ্ট বিভাগ। এটি পরীক্ষার জন্য এবং স্ক্রিপ্ট সরবরাহ এবং উত্পাদন জন্য বিল্ডিং সরবরাহ করে।

আপনি নেটলিফাইয়ের মতো পরিষেবাগুলি ব্যবহার করতে পারেন যা তাদের প্রকল্প থেকে আপনার প্রকল্পের গিথুব রেপো সংযুক্ত করে আপনার প্রকল্পটি বান্ডিল করবে। এটি অন্যান্য সাইট যেমন কীভাবে হিরকুতে স্থাপন করা যায় সে সম্পর্কেও তথ্য সরবরাহ করে।

আপনি এখানে আরও বিশদ জানতে পারেন

Answer 14

বিশ্বব্যাপী প্রথমে ভ্যু ক্লায়ার ইনস্টল করুন

npm install -g @vue/cli

একটি নতুন প্রকল্প তৈরি করতে, চালান:

vue create project-name

চালিয়ে যান

npm run serve 

ভ্যু সিএলআই> = 3 একই ভ্যু বাইনারি ব্যবহার করে, সুতরাং এটি ভ্যু সিএলআই 2 (ভ্যু-ক্লিপ) ওভাররাইট করে। যদি এখনও আপনার উত্তরাধিকার সূত্রের কার্যকারিতা প্রয়োজন হয় তবে আপনি একটি বিশ্বব্যাপী ব্রিজ ইনস্টল করতে পারেন:

বিশ্বব্যাপী ভুন ইনিশ

npm install -g @vue/cli-init

vue init এখন vue-cli@2.x এর মতো কাজ করে

অ্যাপ্লিকেশন তৈরি করুন

vue init webpack my-project

বিকাশকারী সার্ভার চালান

npm run dev

Answer 15

আপনি যদি আপনার রিমোট সার্ভারটি তৈরি করতে এবং প্রেরণ করতে চান তবে আপনি ক্লিপ-পরিষেবা ( https://cli.vuejs.org/guide/cli-service.html ) ব্যবহার করতে পারেন, আপনি পরিবেশন করতে, তৈরি করতে এবং কিছুতে স্থাপন করার জন্য একটি তৈরি করতে পারেন নির্দিষ্ট প্লাগইন হিসাবেvue-cli-plugin-s3-deploy