如何在Vue-cli项目中更改端口号,使其在另一个端口上运行而不是8080。
当前回答
在webpack.config.js中:
module.exports = {
......
devServer: {
historyApiFallback: true,
port: 8081, // you can change the port there
noInfo: true,
overlay: true
},
......
}
您可以在模块中更改端口。exports -> devServer ->端口。
然后你重新启动npm run dev。你可以得到那个。
其他回答
虽然有点晚了,但我认为将所有这些答案整合成一个概述所有选项的答案是有帮助的。
分别在Vue CLI v2 (webpack模板)和Vue CLI v3中,按优先级(从高到低)排序。
Vue CLI v3
package.json: Add port option to serve script: scripts.serve=vue-cli-service serve --port 4000 CLI Option --port to npm run serve, e.g. npm run serve -- --port 3000. Note the --, this makes passes the port option to the npm script instead of to npm itself. Since at least v3.4.1, it should be e.g. vue-cli-service serve --port 3000. Environment Variable $PORT, e.g. PORT=3000 npm run serve .env Files, more specific envs override less specific ones, e.g. PORT=3242 vue.config.js, devServer.port, e.g. devServer: { port: 9999 }
引用:
https://cli.vuejs.org/config/#devserver https://cli.vuejs.org/config/#vue-config-js https://cli.vuejs.org/guide/mode-and-env.html
Vue CLI v2(已弃用)
环境变量$PORT,例如:PORT=3000 / config / index.js: dev.port
引用:
http://vuejs-templates.github.io/webpack/ https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35
vue-cli版本3的另一种方法是在根项目目录中添加一个.env文件(与package.json一起),内容如下:
端口= 3000
运行npm run serve现在将指示应用程序在端口3000上运行。
如果您使用vue-cli 3。X,你可以简单地将端口传递给NPM命令,如下所示:
运行服务-- --端口3000
然后访问http://localhost:3000/
打开package.json 添加名为serve的脚本,"serve": "Vue-cli-service serve -port 8081" NPM运行服务 服务器将运行8081
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8081",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}
在visual studio代码中的vue项目中,我必须在/config/index.js中设置这个。 在下面更改:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
host: 'localhost', // can be overwritten by process.env.HOST
port: 8090, // 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
}
}