如何在Vue-cli项目中更改端口号,使其在另一个端口上运行而不是8080。


当前回答

如果你使用纱线:

yarn serve --port 3000

其他回答

Vue-cli webpack模板的端口在你的应用根目录myApp/config/index.js中。

你所要做的就是在dev块中修改端口值:

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

现在你可以用localhost:4545访问你的应用了

如果你有。env文件,最好从那里设置

在webpack.config.js中:

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

您可以在模块中更改端口。exports -> devServer ->端口。

然后你重新启动npm run dev。你可以得到那个。

将PORT环境变量添加到package.json中的服务脚本中:

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

如果您正在使用vue cli 3,另一个选择是使用配置文件。创建vue.config.js与你的包在同一级别。Json,并像这样放置配置:

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

使用脚本配置:

npm run serve --port 3000

工作很好,但如果你有更多的配置选项,我喜欢在配置文件中做。你可以在文档中找到更多信息。

进入“node_modules/@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 => {}
}