vue.config.js什么配置端口

在Vue项目中，可以通过在根目录下创建vue.config.js文件，并在该文件中配置端口号来修改默认的开发服务器端口号。

具体来说，可以在vue.config.js文件中添加如下代码：

module.exports = {
  devServer: {
    port: 8080 // 修改端口号为8080
  }
}

上述代码中，我们通过配置devServer选项，将端口号修改为8080。在开发过程中，当我们运行npm run serve命令时，Vue将启动一个开发服务器，并将其监听在8080端口上。这样，在浏览器中输入http://localhost:8080即可访问我们的应用程序。

相关问题

vue.config.js 的标准配置

vue.config.js是Vue CLI 3.x提供的一个配置文件，用于配置Vue项目的构建和开发环境。它可以覆盖CLI内部的webpack配置，并且可以扩展CLI的配置。以下是vue.config.js的标准配置：

module.exports = {
// 基本路径
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'static',
// 是否开启eslint保存检测，有效值：true | false | 'error'
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// webpack相关配置
configureWebpack: {
// 覆盖webpack默认配置的都在这里
},
// webpack链式配置
chainWebpack: () => {
// 这里可以用来扩展webpack的配置
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// 开发环境配置
devServer: {
// 端口号
port: 8080,
// 配置代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
}
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}

vue.config.js devServer 配置信息

在Vue项目中，可以通过配置vue.config.js文件来自定义webpack的配置信息，其中devServer字段用于配置开发服务器的相关选项。下面是devServer常用的配置选项：

1. `host`：指定开发服务器的主机名，默认为`localhost`。
2. `port`：指定开发服务器的端口号，默认为`8080`。
3. `https`：指定是否使用HTTPS协议，默认为`false`。
4. `open`：指定是否在启动开发服务器后自动打开浏览器，默认为`false`。
5. `proxy`：用于配置代理服务器，解决前端开发中的跨域问题。可以是一个对象或者一个函数，具体配置方式可以参考官方文档。
6. `before`和`after`：用于在开发服务器启动之前或之后执行自定义的中间件函数。

下面是一个示例的vue.config.js文件，展示了如何配置devServer：

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    before: app => {
      // 自定义中间件函数
    },
    after: app => {
      // 自定义中间件函数
    }
  }
}

以上是devServer的一些常用配置选项，你可以根据自己的需求进行配置。