Vue 项目启动默认打开 http://0.0.0.0:8080 ,浏览器无法访问
5.x 版本 使用–open 时,默认打开浏览器,会出现 0.0.0.0:8080,浏览器显示无法访问。或者在 package.json 中的启动命令添加–host localhost。在 devServer 配置项中添加 host 为 localhost。虽然这个方案解决了问题,但是也产生了新的问题,并不完美。在 vue.config.js 文件中配置进行如下配置。我们可以看到此时的两个地址是相
·
Vue 项目启动默认打开 http://0.0.0.0:8080 ,浏览器无法访问
vue-cli 5.x 版本 使用–open 时,默认打开浏览器,会出现 0.0.0.0:8080,浏览器显示无法访问
vue.config.js 配置
devServer: {
https: false,
open: true,
port: port,
proxy: {},
},
方案一
在 devServer 配置项中添加 host 为 localhost
devServer: {
https: false,
open: true,
port: port,
host: "localhost",
proxy: {},
},
或者在 package.json 中的启动命令添加–host localhost
这里设置的优先级更高
"scripts": {
"serve": "vue-cli-service serve --host localhost",
},
此时就可正常打开
但是也产生了新问题
App running at:
- Local: http://localhost:8861/
- Network: http://localhost:8861/
我们可以看到此时的两个地址是相同的
虽然这个方案解决了问题,但是也产生了新的问题,并不完美
所以有了第二个解决方案
方案二
在 vue.config.js 文件中配置进行如下配置
const { defineConfig } = require('@vue/cli-service');
const port = process.env.port || 8861;
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //关闭eslint 报错不影响编译 可选
devServer: {
https: false,
open: {
target: [`http://localhost:${port}`],
},
port: port,
proxy: {},
},
publicPath: '/',
});
重新启动项目
成功打开页面
控制台输出地址正常
Webpack查看相关文档
vue-cli 查看相关文档
更多推荐
已为社区贡献1条内容
所有评论(0)