使用vue-cli快速搭建前后端分离项目怎么改端口
时间: 2023-05-26 21:02:26 浏览: 75
使用vue-cli快速搭建前后端分离项目的默认端口是8080,如果需要更改端口,可以按照以下步骤进行操作:
1. 打开项目根目录下的config文件夹,找到index.js文件;
2. 在文件中搜索“8080”,会发现有多处出现这个端口,其中一处如下所示:
```
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, webpack will display hints and warnings when your code is not optimized for production.
// See https://webpack.js.org/guides/production/#optimization-hints.
showEslintErrorsInOverlay: false,
}
```
这里的port就是当前项目使用的端口,将它改成你需要的值即可。
3. 保存文件后,重新启动项目,新的端口就会生效了。例如:
```
npm run dev --port 8888
```
或者修改package.json文件中scripts的启动命令:
```
"scripts": {
"dev": "vue-cli-service serve --port 8888",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
```
然后启动项目:
```
npm run dev
```