Vue.js更改调试地址端口号的实例
Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行。开发中，我们在控制台输入命令行npm run dev部署项目后，默认开启的页面调试地址是8080端口。但是有时候我们在进行多个项目开发需要同时部署多个vue项目，甚至有的还需要启动后台项目，这时就需要修改Vue项目的启动端口（不然会报端口被占用的错误，一个端口号只能一个进程占用）。
本文像大家讲解如何找到Vue项目中端口的配置文件，并修改。
首先，我们打开项目根路径中webpack的配置文件package.json，找到如下代码：
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
}
start节点配置的是项目部署编译的入口文件，一般默认是build/dev-server.js，找到build目录下的该文件中下面代码：
var uri = 'http://localhost:' + port
uri就是我们项目部署的地址名称，port即是端口号，我们在这里把port改成新的端口号也可以。在实际开发中，不建议这样在代码中采用硬编码，而是通过统一的配置文件进行定义。
那么配置文件在哪呢，我们继续看dev-server.js文件中如下代码：
var webpackConfig = require('./webpack.dev.conf')
从这里可以看出，引入了一个新的文件webpack.dev.conf，继续点开后发现该本身并不负责具体字段的设置工作，只是引入其他的配置文件以便于统一管理，我们找到如下代码：
var config = require('../config')
注意这里的config是指文件件，我们打开其目录下的index.js,就是端口号的最终设置的地方：
dev: {
env: require('./dev.env'),
port: 8082,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
将port改成新值即可，如我这里的8082，重新部署项目，端口号修改成功。
以上这篇Vue.js更改调试地址端口号的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue如何处理base64格式文件pdf及图片预览功能的相关资料,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue 实现在同一界面实现组件的动态添加和删除,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法
这篇文章主要介绍了vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2024-03-03
解读element-ui使用el-upload,before-upload函数不好使的问题
这篇文章主要介绍了解读element-ui使用el-upload,before-upload函数不好使的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在我们开发项目中,特别是流程审批类的项目,最后一步会提交审核,审核员看完相应信息以后,没问题就会签字通过审批,这篇文章主要给大家介绍了关于VUE签字组件vue-esign安装使用的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue mergeProps用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了vue中项目页面空白但不报错产生的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue+axios 前端实现的常用拦截的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue如何比较字符串变化并高亮变化的部分问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
最新评论