如何在Vue-cli项目中更改端口号,使其在另一个端口上运行而不是8080。
当前回答
如果你使用纱线:
yarn serve --port 3000
其他回答
Vue-cli webpack模板的端口在你的应用根目录myApp/config/index.js中。
你所要做的就是在dev块中修改端口值:
dev: {
proxyTable: {},
env: require('./dev.env'),
port: 4545,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
cssSourceMap: false
}
现在你可以用localhost:4545访问你的应用了
如果你有。env文件,最好从那里设置
进入“node_modules/@vue/cli-service/lib/options.js”目录 在“devServer”的底部,解锁代码 现在在“port”中给出你想要的端口号:)
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 3000, // default port 8080
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
}
在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-service,如果你想在你的包中有端口设置。你的'vue create <app-name>'命令基本上创建的Json文件,你可以使用以下配置:所以你脚本的整个配置是这样的:
...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
我在macOS设备上使用@vue/cli 4.3.1 (vue——version)。
我还添加了vue-cli-service引用: https://cli.vuejs.org/guide/cli-service.html
在撰写本文时(2018年5月5日),vue-cli的配置托管在<your_project_root>/vue.config.js。要更改端口,请参见以下内容:
// vue.config.js
module.exports = {
// ...
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080, // CHANGE YOUR PORT HERE!
https: false,
hotOnly: false,
},
// ...
}
vue.config.js的完整参考可以在这里找到:https://cli.vuejs.org/config/#global-cli-config
请注意,正如文档中所述,“webpack-dev-server的所有选项”(https://webpack.js.org/configuration/dev-server/)在devServer部分中可用。