vue.js - start - Cómo cambiar el número de puerto en el proyecto vue-cli

vue js cli 3

Question

Cómo cambiar el número de puerto en el proyecto Vue-cli para que se ejecute en otro puerto en lugar de 8080.

Answer 1

A la hora de la redacción de esta respuesta (5 de mayo de 2018), vue-cli tiene su configuración alojada en <your_project_root>/vue.config.js . Para cambiar el puerto, ver abajo:

// 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,
  },
  // ...
}

La referencia completa de vue.config.js se puede encontrar aquí: https://cli.vuejs.org/config/#global-cli-config

Tenga en cuenta que como se indica en los documentos, "Todas las opciones para webpack-dev-server" ( https://webpack.js.org/configuration/dev-server/ ) está disponible en la sección devServer .

Answer 2

En el webpack.config.js :

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

Puede cambiar el puerto en module.exports -> devServer -> port .

A continuación, restrat el npm run dev devuelto npm run dev . Usted puede conseguir eso.

Answer 3

La mejor manera es actualizar el comando de script de servicio en su archivo package.json . Simplemente agregue --port 3000 manera:

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

Answer 4

Luego de la fiesta, pero creo que es útil consolidar todas estas respuestas en una que describa todas las opciones.

Separado en Vue CLI v2 (plantilla de paquete web) y Vue CLI v3, ordenados por precedencia (alto a bajo).

Vue CLI v3

• package.json : Agregue la opción de puerto para serve script: scripts.serve=vue-cli-service serve --port 4000
• Opción de CLI --port a npm run serve , por ejemplo, npm run serve -- --port 3000 . Tenga en cuenta que -- , esto hace que pase la opción de puerto al script npm en lugar de a npm en sí.
• Variable de entorno $PORT , p. Ej. PORT=3000 npm run serve
• Archivos .env , los envs más específicos anulan los específicos, por ejemplo, PORT=3242
• vue.config.js , devServer.port , por ejemplo, devServer: { port: 9999 }

Referencias:

• 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 (obsoleto)

• Variable de entorno $PORT , por ejemplo, PORT=3000 npm run dev
• /config/index.js : dev.port

Referencias:

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

Answer 5

Otra opción si está usando vue cli 3 es usar un archivo de configuración. Haga un vue.config.js al mismo nivel que su package.json y ponga una configuración como esta:

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

Configurándolo con el script:

npm run serve --port 3000

Funciona muy bien, pero si tienes más opciones de configuración, me gusta hacerlo en un archivo de configuración. Puedes encontrar más información en la https://cli.vuejs.org/config/#vue-config-js .

Answer 6

Si está utilizando vue-cli 3.x, simplemente puede pasar el puerto al comando npm así:

npm run serve -- --port 3000

Luego visite http://localhost:3000/

Answer 7

Un enfoque alternativo con vue-cli versión 3 es agregar un archivo .env en el directorio del proyecto raíz (junto con package.json ) con el contenido:

PORT=3000

La ejecución de npm run serve ahora indicará que la aplicación se está ejecutando en el puerto 3000.

Answer 8

El puerto para la plantilla de paquete web Vue-cli se encuentra en la raíz de su aplicación myApp/config/index.js .

Todo lo que tienes que hacer es modificar el valor del port dentro del bloque dev :

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

Ahora puedes acceder a tu aplicación con localhost:4545

también si tienes .env archivo .env mejor para configurarlo desde allí