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, 重新部署项目, 端口号修改成功.
来源: http://www.jb51.net/article/147669.htm