Cách thay đổi số cổng trong dự án Vue-cli để nó chạy trên một cổng khác thay vì 8080.

Cổng cho mẫu webpack Vue-cli được tìm thấy trong thư mục gốc ứng dụng của bạn myApp/config/index.js.

Tất cả những gì bạn phải làm là sửa đổi portgiá trị bên trong devkhối:

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

Giờ đây, bạn có thể truy cập ứng dụng của mình với localhost:4545

Ngoài ra nếu bạn có .envtệp tốt hơn để đặt nó từ đó

Nếu bạn đang sử dụng vue-cli3.x, bạn có thể chỉ cần chuyển cổng vào npmlệnh như sau:

npm run serve -- --port 3000

Sau đó ghé thăm http://localhost:3000/

Đến bữa tiệc muộn, nhưng tôi nghĩ sẽ rất hữu ích nếu tổng hợp tất cả các câu trả lời này thành một phác thảo tất cả các lựa chọn.

Được phân tách trong Vue CLI v2 (mẫu webpack) và Vue CLI v3, được sắp xếp theo thứ tự ưu tiên (cao đến thấp).

Vue CLI v3

• package.json: Thêm tùy chọn cổng vào servetập lệnh:scripts.serve=vue-cli-service serve --port 4000
• CLI Tùy chọn --portđể npm run serve, ví dụ npm run serve -- --port 3000. Lưu ý rằng --, điều này làm cho tùy chọn cổng chuyển sang tập lệnh npm thay vì cho chính npm. Vì ít nhất v3.4.1, nó phải là vd vue-cli-service serve --port 3000.
• Biến môi trường $PORT, ví dụ:PORT=3000 npm run serve
• .env Các tệp, env cụ thể hơn sẽ ghi đè lên những cái ít cụ thể hơn, ví dụ: PORT=3242
• vue.config.js, devServer.port vddevServer: { port: 9999 }

Người giới thiệu:

• 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 (không dùng nữa)

• Biến môi trường $PORT, ví dụ:PORT=3000 npm run dev
• /config/index.js: dev.port

Người giới thiệu:

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

Tại thời điểm viết câu trả lời này (ngày 5 tháng 5 năm 2018), vue-clicấu hình của nó được lưu trữ tại <your_project_root>/vue.config.js. Để thay đổi cổng, hãy xem bên dưới:

// 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.jsBạn có thể tham khảo đầy đủ tại đây: https://cli.vuejs.org/config/#global-cli-config

Lưu ý rằng như đã nêu trong tài liệu, “Tất cả các tùy chọn cho webpack-dev-server” ( https://webpack.js.org/configuration/dev-server/ ) đều có sẵn trong devServerphần này.

Một tùy chọn khác nếu bạn đang sử dụng vue cli 3 là sử dụng tệp cấu hình. Tạo một vue.config.jsở cùng cấp với của bạn package.jsonvà đặt một cấu hình như vậy:

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

Định cấu hình nó bằng script:

npm run serve --port 3000

hoạt động tốt nhưng nếu bạn có nhiều tùy chọn cấu hình hơn, tôi muốn làm điều đó trong một tệp cấu hình. Bạn có thể tìm thêm thông tin trong tài liệu .

Cách tốt nhất là cập nhật lệnh script phục vụ trong package.jsontệp của bạn . Chỉ cần nối --port 3000như vậy:

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

Trong webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

Bạn có thể thay đổi cổng trong module.exports-> devServer->port .

Sau đó, bạn sắp xếp lại npm run dev. Bạn có thể nhận được điều đó.

Nếu bạn muốn thay đổi cổng localhost, bạn có thể thay đổi thẻ script trong package.json :

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

Một cách tiếp cận thay thế với vue-cliphiên bản 3 là thêm một .envtệp trong thư mục gốc của dự án (cùng bên package.json) với nội dung:

PORT=3000

Đang chạy npm run servesẽ cho biết ứng dụng đang chạy trên cổng 3000.

Có rất nhiều câu trả lời ở đây thay đổi theo phiên bản, vì vậy tôi nghĩ rằng tôi sẽ xác nhận và giải thích rõ ràng câu trả lời của Julien Le Coupanec ở trên từ tháng 10 năm 2018 khi sử dụng Vue CLI . Trong phiên bản gần đây nhất của Vue.js kể từ bài đăng này - vue@2.6.10 - các bước được nêu bên dưới có ý nghĩa nhất đối với tôi sau khi xem qua một số câu trả lời trong vô số câu trả lời trong bài đăng này. Các tài liệu Vue.js tài liệu tham khảo mảnh của câu đố này, nhưng không phải là khá rõ ràng.

1. Mở package.jsontệp trong thư mục gốc của dự án Vue.js.
2. Tìm kiếm "cổng" trong package.jsontệp.

3. Khi tìm thấy tham chiếu sau đến "cổng", hãy chỉnh sửa servephần tử tập lệnh để phản ánh cổng mong muốn, sử dụng cú pháp tương tự như được hiển thị bên dưới:

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

4. Đảm bảo khởi động lại npmmáy chủ để tránh mất trí không cần thiết.

Các chương trình tài liệu một cách hiệu quả có thể nhận được kết quả tương tự bằng cách thêm --port 8080vào cuối của các npm run servelệnh như vậy: npm run serve --port 8080. Tôi thích chỉnh sửa package.jsontrực tiếp để tránh phải nhập thêm, nhưng chỉnh sửa npm run serve --port 1234nội dòng có thể hữu ích đối với một số người.

Thêm PORTenvariable vào servescript của bạn trong package.json:

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

Ôi chúa ơi! Nó không phức tạp lắm, với những câu trả lời này cũng hoạt động. Tuy nhiên, các câu trả lời khác cho câu hỏi này cũng hoạt động tốt.

Nếu bạn thực sự muốn sử dụng vue-cli-servicevà nếu bạn muốn có cài đặt cổng trong package.jsontệp của mình , mà lệnh 'vue create <app-name>' về cơ bản tạo, bạn có thể sử dụng cấu hình sau:--port 3000 . Vì vậy, toàn bộ cấu hình của tập lệnh của bạn sẽ như thế này:

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

Tôi đang sử dụng @vue/cli 4.3.1 (vue --version)trên thiết bị macOS.

Tôi cũng đã thêm tham chiếu vue-cli-service: https://cli.vuejs.org/guide/cli-service.html

Trong dự án vue của tôi trong mã studio trực quan, tôi phải đặt điều này trong /config/index.js . Thay đổi nó trong:

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

Đi tới node_modules/@vue/cli-service/lib/options.js
Ở dưới cùng bên trong "devServer" bỏ chặn các mã
Bây giờ, hãy cung cấp số cổng mong muốn của bạn trong "cổng" :)

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