Vue.js更改调试地址端口号
2017-08-08 16:50
555 查看
Vue项目一般使用自带的脚手架工具
本文像大家讲解如何找到Vue项目中端口的配置文件,并修改。
首先,我们打开项目根路径中
start节点配置的是项目部署编译的入口文件,一般默认是
那么配置文件在哪呢,我们继续看
从这里可以看出,引入了一个新的文件
注意这里的
将
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.js如何更改默认端口号8080为指定端口
- vue.js如何更改默认端口号8080为指定端口
- vue.js如何更改默认端口号8080为指定端口的方法
- vue.js更改默认端口号
- ie6下js动态更改图片地址,图片不显示的bug
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
- 如何用VSCode调试Vue.js
- 让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight。 下载地址: https://github.com/vuejs/vue-synt
- vue 端口号更改
- 使用Gradle整合SpringBoot+Vue.js-开发调试与打包
- vue.js拓展篇(8):测试开发与调试
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
- 使用Gradle整合SpringBoot+Vue.js-开发调试与打包
- vue如何更改默认端口号8080为指定端口
- 怎么更改VUE项目的运行端口号
- Vue.js调试工具vue-devtools
- 三级联动:js实现淘宝地址更改
- vue.js 调试工具的安装
- vue.js更改class