DDR爱好者之家 Design By 杰米

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更改调试地址端口号的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?