vue.config.js什么配置端口
时间: 2023-07-18 12:44:46 浏览: 193
在Vue项目中,可以通过在根目录下创建vue.config.js文件,并在该文件中配置端口号来修改默认的开发服务器端口号。
具体来说,可以在vue.config.js文件中添加如下代码:
```javascript
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 vue.config.js 配置
Vue项目中的vue.config.js文件是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被@vue/cli-service自动加载。在这个文件中,你可以对webpack进行自定义配置,例如修改webpack的默认配置、添加插件等。同时,你也可以使用package.json中的vue字段来进行配置,但是需要严格遵照JSON格式来写。
以下是一些常见的vue.config.js配置选项:
1. publicPath:指定打包后静态资源的路径。
2. outputDir:指定打包后的输出目录。
3. devServer:配置开发服务器,例如端口号、代理等。
4. configureWebpack:用于修改webpack的默认配置。
5. chainWebpack:用于通过链式操作修改webpack的默认配置。
6. css:用于配置CSS相关的选项,例如是否提取CSS、是否开启CSS source map等。