webstorm中vue项目不能用ip访问解决

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(3133)   2024-03-16 09:33:24

在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来。

默认方式运行
默认方式运行

 

我们在浏览器里输入localhost:8080就可以访问该项目了。

但是要是手机想访问的话,就得通过ip地址,但当我输入ip地址进行访问时,却发现不行。

于是我找项目的配置文件,发现config/index.js,有个host的配置项,默认值为“localhost”,我把localhost改成ip地址,重启,发现可以访问,但localhost:8080这个地址就没办法访问了。

index.js修改
index.js修改

 

本着一点强迫症,在网上百度的基础与向dalao请教的基础之上,找到了有个解决办法。既能通过ip地址访问,也能通过localhost访问。

方法1.将index.js中的host的值改为‘0.0.0.0’

方法2.修改package.json中script下dev的值,在后面加入--host 0.0.0.0 也可以解决

package.json修改
package.json修改

 

标签2: vue webstorm
地址:https://www.leftso.com/article/496.html

相关阅读

在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataLis...
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body&gtl;     <di...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...
vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } ...
一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决
一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:va...