ভ্যু-ক্লিপ প্রকল্পে পোর্ট নম্বর কীভাবে পরিবর্তন করা যায় যাতে এটি 8080 এর পরিবর্তে অন্য একটি বন্দরে চলে।
উত্তর:
ভ্যু-ক্লিপ ওয়েবপ্যাক টেম্পলেটটির বন্দরটি আপনার অ্যাপ্লিকেশনের মূলের মধ্যে পাওয়া যায় myApp/config/index.js
।
আপনাকে যা করতে হবে তা হ'ল ব্লকের port
ভিতরে মানটি সংশোধন করতে হবে dev
:
dev: {
proxyTable: {},
env: require('./dev.env'),
port: 4545,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
cssSourceMap: false
}
এখন আপনি এর মাধ্যমে আপনার অ্যাপ্লিকেশন অ্যাক্সেস করতে পারেন localhost:4545
আপনার যদি .env
সেখান থেকে সেট করার জন্য আরও ভাল ফাইল থাকে তবে
myApp/config/index.js
অস্তিত্ব নেই!
"scripts": { "serve": "vue-cli-service serve --port 80" },
আপনি যদি vue-cli
x.x ব্যবহার করে থাকেন তবে আপনি সহজেই npm
কমান্ডটিতে পোর্টটি পাস করতে পারেন:
npm run serve -- --port 3000
তারপরে দর্শন করুন http://localhost:3000/
--
ডকটিতে প্রথমটি লেখা নেই: Cli.vuejs.org/guide/cli-service.html# using- the- binary । আমি টাইপ করছিলাম npm run serve --port 3000
যা আমার কাছে যৌক্তিক বলে মনে হয় তবে আমি ত্রুটি পেয়েছি ... থাম্বস আপ!
--
বেরিয়ে পরামিতি দেওয়া npm run serve
এবং না করার vue-cli-service
। আপনি যদি সরাসরি সম্পাদনা করেন package.json
এবং serve
কমান্ডটি সরাসরি হন, আপনি ডকুমেন্টেশনে যেমন দেখানো হয়েছে তেমন প্রবেশ করুন:"serve": "vue-cli-service serve --port 3000",
পার্টিতে দেরীতে, তবে আমি মনে করি যে এই সমস্ত উত্তরগুলি সমস্ত বিকল্পের রূপরেখার একটিকে একীভূত করতে সহায়ক।
প্রাধান্য দ্বারা উচ্চতর (উচ্চ থেকে নিম্ন) অর্ডারযুক্ত ভ্যু সিএলআই ভি 2 (ওয়েবপ্যাক টেম্পলেট) এবং ভ্যু সি এল এল ভি 3 তে পৃথক করা হয়েছে।
package.json
: পোর্ট বিকল্প যুক্ত করুন serve
স্ক্রিপ্টে :scripts.serve=vue-cli-service serve --port 4000
--port
থেকে npm run serve
যেমন npm run serve -- --port 3000
। নোট করুন--
, এটি পোর্ট বিকল্পটিকে এনপিএম স্ক্রিপ্টে এনএমপি পরিবর্তে পাস করে। কমপক্ষে v3.4.1, যেহেতু এটি হওয়া উচিত vue-cli-service serve --port 3000
।$PORT
, উদাঃPORT=3000 npm run serve
.env
ফাইলগুলি, আরও নির্দিষ্ট এনভিওরা কম নির্দিষ্ট নির্দিষ্ট বিষয়গুলিকে ওভাররাইড করে eg PORT=3242
vue.config.js
, devServer.port
যেমনdevServer: { port: 9999 }
তথ্যসূত্র:
$PORT
, উদাঃPORT=3000 npm run dev
/config/index.js
: dev.port
তথ্যসূত্র:
"serve": "vue-cli-service serve --port 4000",
। দুর্দান্ত কাজ!
host
, port
এবং https
কমান্ড লাইন পতাকা দ্বারা মুছে ফেলা হতে পারে।" cli.vuejs.org/config/#Dedserver আমি কি কিছু মিস করছি? অন্য কারও সমস্যা আছে?
এই উত্তরের লেখার সময় হিসাবে (মে 5 ই 2018), vue-cli
এর কনফিগারেশনটি হোস্ট করা হয়েছে <your_project_root>/vue.config.js
। বন্দরটি পরিবর্তন করতে নীচে দেখুন:
// vue.config.js
module.exports = {
// ...
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080, // CHANGE YOUR PORT HERE!
https: false,
hotOnly: false,
},
// ...
}
পূর্ণ vue.config.js
রেফারেন্স এখানে পাওয়া যাবে: https://cli.vuejs.org/config/#global-cli-config
নোটগুলিতে বর্ণিত হিসাবে উল্লেখ করুন, "ওয়েবপ্যাক-দেব-সার্ভারের জন্য সমস্ত অপশন" ( https://webpack.js.org/configration/dev-server/ ) devServer
বিভাগের মধ্যে উপলব্ধ ।
আপনি ভিউ ক্লিপ 3 ব্যবহার করছেন তবে অন্য একটি বিকল্পটি একটি কনফিগার ফাইল ব্যবহার করা। আপনার vue.config.js
সমান স্তরে একটি তৈরি করুন package.json
এবং এর মতো একটি কনফিগার করুন:
module.exports = {
devServer: {
port: 3000
}
}
স্ক্রিপ্ট দিয়ে এটি কনফিগার করা:
npm run serve --port 3000
দুর্দান্ত কাজ করে তবে আপনার যদি আরও কনফিগার বিকল্প থাকে তবে আমি এটি একটি কনফিগার ফাইলে করতে পছন্দ করি। আপনি ডক্সে আরও তথ্য পেতে পারেন ।
আপনি যদি লোকালহোস্ট পোর্ট পরিবর্তন করতে চান তবে আপনি প্যাকেজ.জসনে স্ক্রিপ্ট ট্যাগ পরিবর্তন করতে পারেন :
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
সর্বোত্তম উপায় হ'ল আপনার package.json
ফাইলে পরিবেশন স্ক্রিপ্টটি আপডেট করা । ঠিক --port 3000
যেমন সংযোজন :
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"inspect": "vue-cli-service inspect",
"lint": "vue-cli-service lint"
},
ইন webpack.config.js
:
module.exports = {
......
devServer: {
historyApiFallback: true,
port: 8081, // you can change the port there
noInfo: true,
overlay: true
},
......
}
আপনি module.exports
-> devServer
-> এ বন্দরটি পরিবর্তন করতে পারেন port
।
তারপরে আপনি পুনরায় চালু করুন npm run dev
। আপনি এটি পেতে পারেন।
vue-cli
সংস্করণ 3 সহ একটি বিকল্প পদ্ধতির .env
মূল package.json
বিষয়বস্তু সহ মূল প্রকল্প ডিরেক্টরিতে (পাশাপাশি ) একটি ফাইল যুক্ত করা :
PORT=3000
চলমান npm run serve
এখন অ্যাপ্লিকেশনটি 3000 পোর্টে চলছে তা নির্দেশ করবে।
সংস্করণ অনুসারে এখানে প্রচুর উত্তর রয়েছে, তাই ভ্যু সি এল এলই ব্যবহার করার সময় আমি ভেবেছিলাম যে জুলিয়েন লে কপানেকের উত্তরটি অক্টোবর 2018 থেকে আমি উত্তরটি নিশ্চিত এবং ব্যাখ্যা করব । Vue.js এর সাম্প্রতিক সংস্করণে এই পোস্টটি হিসাবে - vue@2.6.10 - নীচের বর্ণিত পদক্ষেপগুলি এই পোস্টে অগণিত উত্তরগুলি সন্ধানের পরে আমার কাছে সর্বাধিক উপলব্ধি করেছে। Vue.js ডকুমেন্টেশন রেফারেন্স এই ধাঁধা টুকরোগুলি কিন্তু স্পষ্ট যেমন বেশ নয়।
package.json
Vue.js প্রকল্পের মূল ডিরেক্টরিতে ফাইলটি ।package.json
ফাইলটিতে করুন।"পোর্ট" এ নিম্নলিখিত রেফারেন্সটি সন্ধান করার পরে, নিচের serve
চিত্রের মতো একই বাক্য গঠন ব্যবহার করে কাঙ্ক্ষিত পোর্টটি প্রতিফলিত করতে স্ক্রিপ্ট উপাদানটি সম্পাদনা করুন :
"scripts": {
"serve": "vue-cli-service serve --port 8000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
npm
অপ্রয়োজনীয় উন্মাদনা এড়াতে সার্ভারটি পুনরায় চালু করতে ভুলবেন না ।
ডকুমেন্টেশন শো যে এক কার্যকরভাবে যুক্ত করে একই ফলাফল পেতে পারেন --port 8080
শেষে npm run serve
তাই মত কমান্ড প্রয়োগ করুন: npm run serve --port 8080
। package.json
অতিরিক্ত টাইপ করা এড়াতে আমি সরাসরি সম্পাদনা করতে পছন্দ করেছি তবে npm run serve --port 1234
কিছুটা ক্ষেত্রে ইনলাইন সম্পাদনা কাজে লাগতে পারে।
হে ভগবান! এই উত্তরগুলির সাথে এটি কাজ করে যে এটি এতটা জটিল নয়। তবে এই প্রশ্নের অন্যান্য উত্তরগুলিও ভাল কাজ করে।
আপনি কি সত্যিই ব্যবহার করতে চান তাহলে vue-cli-service
আর আপনি যদি আপনার বন্দর সেটিং করতে চান package.json
ফাইল যা আপনার 'Vue <অ্যাপ্লিকেশান-নাম> তৈরি' কম্যান্ড মূলত তৈরি করে, আপনি নিম্নলিখিত কনফিগারেশন ব্যবহার করতে পারেন: --port 3000
। সুতরাং আপনার স্ক্রিপ্টের পুরো কনফিগারেশনটি এরকম হবে:
...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
আমি @vue/cli 4.3.1 (vue --version)
একটি ম্যাকোস ডিভাইস ব্যবহার করছি ।
আমি ভিউ-ক্লিপ-পরিষেবা রেফারেন্সটিও যুক্ত করেছি: https://cli.vuejs.org/guide/cli-service.html
ভিজ্যুয়াল স্টুডিও কোডে আমার প্রজেক্টে, আমাকে এটি /config/index.js এ সেট করতে হয়েছিল । এটিকে পরিবর্তন করুন:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
host: 'localhost', // can be overwritten by process.env.HOST
port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false
}
}
প্রথম বিকল্প:
খোলা package.json যোগ "--port পোর্ট-না" মধ্যে "পরিবেশন করা" অধ্যায়।
ঠিক নীচের মত, আমি এটি সম্পন্ন করেছি।
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8090",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
দ্বিতীয় বিকল্প : আপনি যদি কমান্ড প্রম্পটের মাধ্যমে চান
npm run serve --port 8090
নোড_মডিউলস/@vue/ cli-service/lib/options.js এ যান "ডেভ সার্ভার" এর নীচে নীচে কোডগুলি অবরুদ্ধ করুন
এখন "পোর্ট" এ আপনার পছন্দসই পোর্ট নম্বর দিন :)
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 3000, // default port 8080
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
}