Vue-cli प्रोजेक्ट में पोर्ट नंबर कैसे बदलें

Question

Vue-cli प्रोजेक्ट में पोर्ट नंबर कैसे बदलें ताकि यह 8080 के बजाय दूसरे पोर्ट पर चले।

Answer 1

Vue-cli webpack टेम्पलेट के लिए पोर्ट आपके ऐप रूट में पाया जाता है myApp/config/index.js।

आपको बस इतना करना है portकि devब्लॉक के अंदर के मूल्य को संशोधित करें :

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

अब आप अपने ऐप को एक्सेस कर सकते हैं localhost:4545

अगर आपके पास .envवहां से इसे सेट करने के लिए बेहतर फाइल है

Comments

नवीनतम vuejs संस्करण में। फ़ाइल का उपयोग करने के बजाय अब उपयोग नहीं किया जाता है: <your_project_root> /vue.config.js।

— जियानवू चेन

फ़ाइल myApp/config/index.jsमौजूद नहीं है!

— पूर्वाह्न

Vue CLI 3 प्रोजेक्ट रूट पर vue.config.js का उपयोग करता है। इसे मैन्युअल रूप से IIRC बनाना होगा।

— ईज एर्सोज़

वहाँ कोई vue.config.js नहीं है

— Geomorillo

"scripts": { "serve": "vue-cli-service serve --port 80" },

— सुधीर के गुप्ता

Answer 2

यदि आप vue-cli3.x का उपयोग कर रहे हैं , तो आप पोर्ट को npmकमांड की तरह पास कर सकते हैं :

npm run serve -- --port 3000

फिर विजिट करें http://localhost:3000/

Comments

आपने मुझे कीमती समय बचाया है, जैसा कि पहले --डॉक्टर में नहीं लिखा है: cli.vuejs.org/guide/cli-service.html#use-the-binary । मैं टाइप कर रहा था npm run serve --port 3000जो मुझे तर्कसंगत लगता है, लेकिन मुझे त्रुटियाँ मिलीं ... अंगूठे ऊपर!

— toni07

ऐसा इसलिए है क्योंकि पहले कि --पलायन मानकों को दी npm run serveऔर नहीं करने के लिए vue-cli-service। यदि आप संपादित करते हैं package.jsonऔर serveसीधे कमांड करते हैं, तो आप इसे दस्तावेज़ में दिखाए अनुसार दर्ज करते हैं:"serve": "vue-cli-service serve --port 3000",

— MatsLindh

Answer 3

पार्टी के लिए देर हो चुकी है, लेकिन मुझे लगता है कि इन सभी उत्तरों को एक विकल्प के रूप में रेखांकित करना मददगार है।

Vue CLI v2 (वेबपैक टेम्प्लेट) और Vue CLI v3 में अलग, पूर्ववर्तीता (उच्च से निम्न) द्वारा आदेशित।

Vue CLI v3

• package.json: serveस्क्रिप्ट में पोर्ट विकल्प जोड़ें :scripts.serve=vue-cli-service serve --port 4000
• CLI विकल्प --portके लिए npm run serve, उदाहरण के लिए npm run serve -- --port 3000। ध्यान दें --, यह npm स्क्रिप्ट के बजाय npm स्क्रिप्ट के लिए पोर्ट विकल्प को ही पास करता है। कम से कम v3.4.1 के बाद से, यह होना चाहिए vue-cli-service serve --port 3000।
• पर्यावरण चर $PORT, उदाहरण के लिएPORT=3000 npm run serve
• .env फाइलें, अधिक विशिष्ट एनवी कम विशिष्ट लोगों को ओवरराइड करती हैं, जैसे PORT=3242
• vue.config.js, devServer.portजैसेdevServer: { port: 9999 }

संदर्भ:

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2 (पदावनत)

• पर्यावरण चर $PORT, उदाहरण के लिएPORT=3000 npm run dev
• /config/index.js: dev.port

संदर्भ:

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

Comments

ऐसा लगता है कि यह नवीनतम vue cli (3.4.1 का उपयोग करके) में एक बालक को बदल दिया है, यहाँ पैकेज में मेरी "सेवा" पंक्ति है "serve": "vue-cli-service serve --port 4000",:। बहुत अच्छा काम करता है!

— RoccoB

@RoccoB धन्यवाद, मैंने इसे सत्यापित किया और उत्तर में जोड़ा।

— वॉर्नर

उपरोक्त उत्तर इस तिथि को v3 में काम नहीं करते हैं। मैंने .env विकल्प, package.json, vue.config.js और CLI कमांड विकल्प की कोशिश की, लेकिन वे सभी अनदेखा हो जाते हैं। कॉन्फ़िगर फ़ाइल डॉक्स का कहना है "कुछ मान जैसे host, portऔर httpsकमांड लाइन झंडे द्वारा अधिलेखित हो सकते हैं।" cli.vuejs.org/config/#devserver क्या मुझे कुछ याद आ रहा है? किसी और के मुद्दे होने?

— रयान

@Ryan - यह कल VueJS CLI रिपोजिटरी इश्यूज में बताया गया था: github.com/vuejs/vue-cli/issues/4452 यह पोर्टफ़ाइंडर ( github.com/ttp-party/node-portfinder ) स्थापित करने के लिए कह रहा है क्योंकि ब्रेकिंग चेंज जो उसके साथ हुआ।

— एंजेलो

Answer 4

इस उत्तर के लेखन के समय (मई 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/configuration/dev-server/ ) devServerअनुभाग के भीतर उपलब्ध है ।

Comments

@ एसआरएफ: उत्तर संपादित किया गया। टूटी हुई कड़ी को इंगित करने के लिए धन्यवाद।

— टॉमीजया जूल

A \ _ गया होगा। उस साइट पर प्रभाव :)

— 21

Answer 5

एक अन्य विकल्प यदि आप vue cli 3 का उपयोग कर रहे हैं तो एक कॉन्फिग फाइल का उपयोग करना है। vue.config.jsअपने स्तर पर एक ही स्तर पर बनाएं package.jsonऔर एक कॉन्फिगरेशन को जैसे:

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

इसे स्क्रिप्ट के साथ कॉन्फ़िगर करना:

npm run serve --port 3000

बहुत अच्छा काम करता है, लेकिन अगर आपके पास अधिक कॉन्फिग विकल्प हैं, तो मुझे इसे कॉनफ़िगर फ़ाइल में करना पसंद है। आप डॉक्स में अधिक जानकारी पा सकते हैं ।

Comments

मुझे यह उत्तर पसंद है क्योंकि यह दिखाता है कि vue.config.js का उपयोग केवल पोर्ट को बदलने और बाकी सब को छोड़ने के लिए किया जा सकता है-जो कि मूल रूप से पूछा गया था।

— ट्विस्टेड

Answer 6

सबसे अच्छा तरीका है कि आप अपनी 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"
},

Answer 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। आप वह प्राप्त कर सकते हैं।

Answer 8

आप स्थानीय होस्ट पोर्ट बदलना चाहते हैं, तो आप में स्क्रिप्ट टैग को बदल सकते हैं package.json :

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

Comments

बहुत बहुत धन्यवाद :-)

— एडम ओरलोव

Answer 9

vue-cliसंस्करण 3 के साथ एक वैकल्पिक दृष्टिकोण सामग्री के साथ .envरूट प्रोजेक्ट डायरेक्टरी (साइड में package.json) में एक फ़ाइल जोड़ना है :

PORT=3000

रनिंग npm run serveअब संकेत देगी कि ऐप 3000 पोर्ट पर चल रहा है।

Answer 10

संस्करण के आधार पर यहाँ बहुत सारे उत्तर हैं, इसलिए मैंने सोचा कि मैं जूलियन ले कूपेन के उत्तर की पुष्टि करूंगा और अक्टूबर 2018 से ऊपर जब वीयूआई सीएलआई का उपयोग करूंगा । इस पोस्ट के रूप में Vue.js के सबसे हाल के संस्करण में - vue@2.6.10 - नीचे दिए गए उल्लिखित चरणों ने इस पोस्ट में कुछ असंख्य जवाबों को देखने के बाद मुझे सबसे अधिक समझ में आया। Vue.js प्रलेखन संदर्भ इस पहेली के टुकड़े, लेकिन स्पष्ट रूप में काफी नहीं है।

1. को खोलो package.jsonफ़ाइल को Vue.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 8080। मैंने package.jsonअतिरिक्त टाइपिंग से बचने के लिए सीधे संपादन को प्राथमिकता दी , लेकिन npm run serve --port 1234कुछ के लिए संपादन इनलाइन काम में आ सकती है।

Answer 11

जोड़े PORTअपने को envvariable serveमें स्क्रिप्ट package.json:

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

Answer 12

हे भगवान! यह इतना जटिल नहीं है, इन उत्तरों के साथ जो काम भी करता है। हालाँकि, इस प्रश्न के अन्य उत्तर भी अच्छी तरह से काम करते हैं।

यदि आप वास्तव में उपयोग करना चाहते हैं vue-cli-serviceऔर यदि आप अपनी package.jsonफ़ाइल में पोर्ट सेटिंग करना चाहते हैं , जो कि आपका 'vue create <app-name>' कमांड मूल रूप से बनाता है, तो आप निम्न कॉन्फ़िगरेशन का उपयोग कर सकते हैं --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)एक macOS डिवाइस पर उपयोग कर रहा हूँ ।

मैंने vue-cli-service reference भी जोड़ा है: https://cli.vuejs.org/guide/cli-sc.html

Answer 13

विजुअल स्टूडियो कोड में मेरे vue प्रोजेक्ट में, मुझे इसे /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    
         }
}

Answer 14

नोड_मॉडल /@vue/cli-service/lib/options.js
पर जाएं "devServer" के अंदर नीचे दिए गए कोड को अनब्लॉक करें
अब अपने इच्छित पोर्ट नंबर को "port" में दें :)

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 => {}
}

Comments

node_modules / @ vue / cli-service पर जाएं ...? क्या यह npm अपडेट पर ओवरराइट नहीं किया गया है?

— जोएरी