วิธีเปลี่ยนหมายเลขพอร์ตในโครงการ Vue-cli เพื่อให้รันบนพอร์ตอื่นแทน 8080

พอร์ตสำหรับเทมเพลต 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ไฟล์ที่ดีกว่าที่จะตั้งค่าจากที่นั่น

หากคุณใช้vue-cli3.x คุณสามารถส่งผ่านพอร์ตไปยังnpmคำสั่งดังนี้:

npm run serve -- --port 3000

จากนั้นเยี่ยมชม http://localhost:3000/

สายไปงานปาร์ตี้ แต่ฉันคิดว่าการรวมคำตอบทั้งหมดนี้เป็นหนึ่งเดียวโดยสรุปตัวเลือกทั้งหมดจะเป็นประโยชน์

แยกใน Vue CLI v2 (เทมเพลต webpack) และ Vue CLI v3 เรียงลำดับตามลำดับความสำคัญ (สูงไปต่ำ)

Vue CLI v3.0

• 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

เป็นเวลาของการเขียนของคำตอบนี้ (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

โปรดทราบว่าตามที่ระบุไว้ในเอกสาร "ตัวเลือกทั้งหมดสำหรับ webpack-dev-server" ( https://webpack.js.org/configuration/dev-server/ ) มีอยู่ในdevServerส่วนนี้

อีกทางเลือกหนึ่งหากคุณใช้ vue cli 3 คือการใช้ไฟล์ config สร้างvue.config.jsในระดับเดียวกับของคุณpackage.jsonและกำหนดค่าดังนี้:

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

การกำหนดค่าด้วยสคริปต์:

npm run serve --port 3000

ใช้งานได้ดี แต่ถ้าคุณมีตัวเลือกการกำหนดค่าเพิ่มเติมฉันชอบทำในไฟล์ config คุณสามารถค้นหาข้อมูลเพิ่มเติมในเอกสาร

หากคุณต้องการเปลี่ยนพอร์ต localhost คุณสามารถเปลี่ยนแท็กสคริปต์ในpackage.json :

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

วิธีที่ดีที่สุดคืออัปเดตคำสั่ง serve script ใน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-> ->devServerport

จากนั้นให้คุณปรับเปลี่ยนไฟล์npm run dev. คุณจะได้รับสิ่งนั้น

อีกทางเลือกหนึ่งสำหรับvue-cliเวอร์ชัน 3 คือการเพิ่ม.envไฟล์ในไดเร็กทอรีโปรเจ็กต์รูท (พร้อมกันpackage.json) ที่มีเนื้อหา:

PORT=3000

npm run serveขณะนี้การรันจะแสดงว่าแอปกำลังทำงานบนพอร์ต 3000

มีจำนวนมากของคำตอบที่นี่แตกต่างจากรุ่นดังนั้นฉันคิดว่าฉันยืนยันและอธิบายเมื่อคำตอบมั๊ยเลอ Coupanec เหนือจากตุลาคม 2018 เมื่อใช้ Vue CLI ใน 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แบบอินไลน์อาจมีประโยชน์สำหรับบางคน

โอ้พระเจ้า! ไม่ซับซ้อนมากนักโดยคำตอบเหล่านี้ก็ใช้ได้เช่นกัน อย่างไรก็ตามคำตอบอื่น ๆ สำหรับคำถามนี้ก็ใช้ได้ดีเช่นกัน

ถ้าคุณอยากที่จะใช้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)บนอุปกรณ์ macOS

ฉันได้เพิ่มการอ้างอิง vue-cli-service แล้ว: https://cli.vuejs.org/guide/cli-service.html

เพิ่มสิ่งที่น่าPORTอิจฉาให้กับserveสคริปต์ของคุณในpackage.json:

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

ในโครงการ 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    
         }
}

ตัวเลือกแรก:

OPEN package.jsonและเพิ่ม"--port port-no"ใน"serve"ส่วน

เช่นเดียวกับด้านล่างฉันได้ทำมัน

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

ไปที่ node_modules/@vue/cli-service/lib/options.js
ที่ด้านล่างภายใน "devServer" ปลดบล็อกรหัส
ตอนนี้ให้หมายเลขพอร์ตที่คุณต้องการใน "พอร์ต" :)

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