ভ্যু-ক্লিপ প্রকল্পে কীভাবে পোর্ট নম্বর পরিবর্তন করবেন


114

ভ্যু-ক্লিপ প্রকল্পে পোর্ট নম্বর কীভাবে পরিবর্তন করা যায় যাতে এটি 8080 এর পরিবর্তে অন্য একটি বন্দরে চলে।

উত্তর:


21

ভ্যু-ক্লিপ ওয়েবপ্যাক টেম্পলেটটির বন্দরটি আপনার অ্যাপ্লিকেশনের মূলের মধ্যে পাওয়া যায় myApp/config/index.js

আপনাকে যা করতে হবে তা হ'ল ব্লকের portভিতরে মানটি সংশোধন করতে হবে dev:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

এখন আপনি এর মাধ্যমে আপনার অ্যাপ্লিকেশন অ্যাক্সেস করতে পারেন localhost:4545

আপনার যদি .envসেখান থেকে সেট করার জন্য আরও ভাল ফাইল থাকে তবে


18
সর্বশেষতম vuejs সংস্করণে। ফাইলটি আর ব্যবহার করা হবে না, পরিবর্তে: <your_project_root> /vue.config.js ব্যবহার করুন।
জিয়ানওয়ু চেন

4
ফাইলটির myApp/config/index.jsঅস্তিত্ব নেই!
এক্সহুমা

4
ভ্যু সিএলআই 3 প্রকল্পের মূলটিতে vue.config.js ব্যবহার করে। এটি ম্যানুয়ালি আইআইআরসি তৈরি করতে হবে।
এজ এরজোজ

4
সেখানে কোনও vue.config.js নেই
জিওমরিলো

19
"scripts": { "serve": "vue-cli-service serve --port 80" },
সুধীর কে গুপ্ত

139

আপনি যদি vue-clix.x ব্যবহার করে থাকেন তবে আপনি সহজেই npmকমান্ডটিতে পোর্টটি পাস করতে পারেন:

npm run serve -- --port 3000

তারপরে দর্শন করুন http://localhost:3000/


8
আপনি আমাকে মূল্যবান সময় সাশ্রয় করেছেন, যেমন --ডকটিতে প্রথমটি লেখা নেই: Cli.vuejs.org/guide/cli-service.html# using- the- binary । আমি টাইপ করছিলাম npm run serve --port 3000যা আমার কাছে যৌক্তিক বলে মনে হয় তবে আমি ত্রুটি পেয়েছি ... থাম্বস আপ!
টনি07

4
এর কারণ প্রথমে --বেরিয়ে পরামিতি দেওয়া npm run serveএবং না করার vue-cli-service। আপনি যদি সরাসরি সম্পাদনা করেন package.jsonএবং serveকমান্ডটি সরাসরি হন, আপনি ডকুমেন্টেশনে যেমন দেখানো হয়েছে তেমন প্রবেশ করুন:"serve": "vue-cli-service serve --port 3000",
ম্যাটস লিন্ড

97

পার্টিতে দেরীতে, তবে আমি মনে করি যে এই সমস্ত উত্তরগুলি সমস্ত বিকল্পের রূপরেখার একটিকে একীভূত করতে সহায়ক।

প্রাধান্য দ্বারা উচ্চতর (উচ্চ থেকে নিম্ন) অর্ডারযুক্ত ভ্যু সিএলআই ভি 2 (ওয়েবপ্যাক টেম্পলেট) এবং ভ্যু সি এল এল ভি 3 তে পৃথক করা হয়েছে।

ভ্যু সিএলআই ভি 3

  • package.json: পোর্ট বিকল্প যুক্ত করুন serve স্ক্রিপ্টে :scripts.serve=vue-cli-service serve --port 4000
  • CLI অপশন --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 }

তথ্যসূত্র:

মান সিএলআই ভি 2 (অবমূল্যায়িত)

  • পরিবেশ পরিবর্তনশীল $PORT, উদাঃPORT=3000 npm run dev
  • /config/index.js: dev.port

তথ্যসূত্র:


4
ভালো দেখায় সর্বশেষ Vue CLI মধ্যে একটি বাচ্চা (3.4.1 ব্যবহার করে) বদলে এখানে package.json মধ্যে আমার "পরিবেশন করা" লাইন: "serve": "vue-cli-service serve --port 4000",। দুর্দান্ত কাজ!
রোকোবি

@ রোকোবি ধন্যবাদ, আমি এটি যাচাই করেছি এবং এটিকে উত্তরে যুক্ত করেছি।
ওওয়ার্নার

উপরের উত্তরগুলি এই তারিখে v3 তে কাজ করবে বলে মনে হচ্ছে না। আমি .env বিকল্প, প্যাকেজ.জসন, vue.config.js, এবং CLI কমান্ড বিকল্পটি চেষ্টা করেছিলাম তবে তারা সবাই উপেক্ষা করে যায়। কনফিগ ফাইল ডক্স বলুন "কিছু মান পছন্দ host, portএবং httpsকমান্ড লাইন পতাকা দ্বারা মুছে ফেলা হতে পারে।" cli.vuejs.org/config/#Dedserver আমি কি কিছু মিস করছি? অন্য কারও সমস্যা আছে?
রায়ান

4
@ রায়ান - এটি গতকাল ভ্যুজেএস সিএলআই সংগ্রহস্থল ইস্যুতে প্রকাশিত হয়েছিল: github.com/vuejs/vue-cli/issues/4452 এটি পোর্টফাইন্ডার ( github.com/http-party/node-portfinder ) ইনস্টল করার কথা বলছে কারণ সেখানে একটি ব্রেকিং পরিবর্তন যা এর সাথে ঘটেছিল।
অ্যাঞ্জেলো

38

এই উত্তরের লেখার সময় হিসাবে (মে 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বিভাগের মধ্যে উপলব্ধ ।


4
@ এসআরএফ: উত্তর সম্পাদিত। ভাঙা লিঙ্কটি নির্দেশ করার জন্য ধন্যবাদ।
টমিজায়া

অবশ্যই একটি been হয়েছে। :) যে সাইট থেকে কার্যকর
মূর্তিমান নিরানন্দ

13

আপনি ভিউ ক্লিপ 3 ব্যবহার করছেন তবে অন্য একটি বিকল্পটি একটি কনফিগার ফাইল ব্যবহার করা। আপনার vue.config.jsসমান স্তরে একটি তৈরি করুন package.jsonএবং এর মতো একটি কনফিগার করুন:

module.exports = {
  devServer: {
    port: 3000
  }
}

স্ক্রিপ্ট দিয়ে এটি কনফিগার করা:

npm run serve --port 3000

দুর্দান্ত কাজ করে তবে আপনার যদি আরও কনফিগার বিকল্প থাকে তবে আমি এটি একটি কনফিগার ফাইলে করতে পছন্দ করি। আপনি ডক্সে আরও তথ্য পেতে পারেন ।


4
আমি এই উত্তরটি পছন্দ করি কারণ এটি দেখায় যে vue.config.js ব্যবহার করা যেতে পারে কেবল বন্দরটি পরিবর্তন করতে এবং সমস্ত কিছু যেমন-তে হয় তেমন ছেড়ে যা মূলত জিজ্ঞাসা করা হয়েছিল।
পাক

11

আপনি যদি লোকালহোস্ট পোর্ট পরিবর্তন করতে চান তবে আপনি প্যাকেজ.জসনে স্ক্রিপ্ট ট্যাগ পরিবর্তন করতে পারেন :

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

আপনাকে অনেক ধন্যবাদ :-)
অ্যাডাম অরলভ

10

সর্বোত্তম উপায় হ'ল আপনার 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"
},

7

ইন 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। আপনি এটি পেতে পারেন।


4

vue-cliসংস্করণ 3 সহ একটি বিকল্প পদ্ধতির .envমূল package.jsonবিষয়বস্তু সহ মূল প্রকল্প ডিরেক্টরিতে (পাশাপাশি ) একটি ফাইল যুক্ত করা :

PORT=3000

চলমান npm run serveএখন অ্যাপ্লিকেশনটি 3000 পোর্টে চলছে তা নির্দেশ করবে।


4

সংস্করণ অনুসারে এখানে প্রচুর উত্তর রয়েছে, তাই ভ্যু সি এল এলই ব্যবহার করার সময় আমি ভেবেছিলাম যে জুলিয়েন লে কপানেকের উত্তরটি অক্টোবর 2018 থেকে আমি উত্তরটি নিশ্চিত এবং ব্যাখ্যা করব । Vue.js এর সাম্প্রতিক সংস্করণে এই পোস্টটি হিসাবে - vue@2.6.10 - নীচের বর্ণিত পদক্ষেপগুলি এই পোস্টে অগণিত উত্তরগুলি সন্ধানের পরে আমার কাছে সর্বাধিক উপলব্ধি করেছে। Vue.js ডকুমেন্টেশন রেফারেন্স এই ধাঁধা টুকরোগুলি কিন্তু স্পষ্ট যেমন বেশ নয়।

  1. খোলা package.jsonVue.js প্রকল্পের মূল ডিরেক্টরিতে ফাইলটি ।
  2. "পোর্ট" এর জন্য অনুসন্ধান করুন package.jsonফাইলটিতে করুন।
  3. "পোর্ট" এ নিম্নলিখিত রেফারেন্সটি সন্ধান করার পরে, নিচের serveচিত্রের মতো একই বাক্য গঠন ব্যবহার করে কাঙ্ক্ষিত পোর্টটি প্রতিফলিত করতে স্ক্রিপ্ট উপাদানটি সম্পাদনা করুন :

    "scripts": {
      "serve": "vue-cli-service serve --port 8000",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }
    
  4. npmঅপ্রয়োজনীয় উন্মাদনা এড়াতে সার্ভারটি পুনরায় চালু করতে ভুলবেন না ।

ডকুমেন্টেশন শো যে এক কার্যকরভাবে যুক্ত করে একই ফলাফল পেতে পারেন --port 8080শেষে npm run serveতাই মত কমান্ড প্রয়োগ করুন: npm run serve --port 8080package.jsonঅতিরিক্ত টাইপ করা এড়াতে আমি সরাসরি সম্পাদনা করতে পছন্দ করেছি তবে npm run serve --port 1234কিছুটা ক্ষেত্রে ইনলাইন সম্পাদনা কাজে লাগতে পারে।


4

হে ভগবান! এই উত্তরগুলির সাথে এটি কাজ করে যে এটি এতটা জটিল নয়। তবে এই প্রশ্নের অন্যান্য উত্তরগুলিও ভাল কাজ করে।

আপনি কি সত্যিই ব্যবহার করতে চান তাহলে 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


সবচেয়ে সহজ সমাধান, ধন্যবাদ!
সাভারিজ

এই উত্তর 3 বছর আগে থেকে এই পৃষ্ঠাটিকে এক সদৃশ stackoverflow.com/a/60727863/401467
datashaman

2

PORTআপনার serveস্ক্রিপ্টে এলোভনীয় যুক্ত করুন package.json:

"serve": "PORT=4767 vue-cli-service serve",

0

ভিজ্যুয়াল স্টুডিও কোডে আমার প্রজেক্টে, আমাকে এটি /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    
         }
}

0

প্রথম বিকল্প:

খোলা 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


-1


নোড_মডিউলস/@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 => {}
}

4
নোড_মডিউলস / @ ভ্যু / ক্লাই-সার্ভিসে যান ...? এটি এনপিএম আপডেটে ওভাররাইট করা হয় না?
জোয়ারি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.