首页 > 其他分享 >vue启动本地服务不显示network访问链接

vue启动本地服务不显示network访问链接

时间:2024-04-24 18:14:30浏览次数:19  
标签:node vue network js build env config 链接

在vue.config.js(或者配置config了的,就在config下的index.js )文件下设置devServer或者dev中的public属性值,需要修改为自己电脑的 IPV4 地址 ,获取IPV4 地址方法,Win + R 打开运行窗口,输入cmd,在命令行输入 ipconfig 回车后会出现一串信息,复制IPV4 地址即可;

module.exports = {
    configureWebpack: {},
    devServer: { // 本地配置
      host: 'localhost',
      public: '此处把复制的IPV4 地址贴过来',
      port: '8080',
      open: false // 是否自动打开浏览器
    }
  }

最后在package.json文件中 scripts 下的 dev 或者 serve 后面加上 --host 0.0.0.0 ;

"scripts": {
    "dev": "node build/dev-server.js --host 0.0.0.0",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },

再次启动项目即可获得Network 地址且可访问。

标签:node,vue,network,js,build,env,config,链接
From: https://www.cnblogs.com/jolin-qin/p/18156050

相关文章

  • 2024-04-24 vue2知识点小结
    Vue实例的创建和基本使用方法:使用newVue()创建一个Vue实例。传入一个包含选项的对象,如data、methods、computed、watch等。使用el选项来指定Vue实例挂载的元素。数据绑定:双向数据绑定:使用v-model指令实现表单元素与数据的双向绑定。单向数据绑定:使用v......
  • Vue--POST请求和GET请求
    1、POST请求(POST请求原则上都要传参数,下面介绍两种传参数的方法)1.1POST请求传参方法1--字典类型参数Vue前端代码<template><formclass="form-inlinepanel-body"id="formData"><div><label>账号</label><inpu......
  • 01-初始Vue
    官网https://cn.vuejs.org/MVVM架构MVVM是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式Model:vue对象的data属性里面的数据,这里的数据要显示到页面中View:vue中数据要显示的HTML页面,在vue中,也称之为“视图模板”(HTML+CSS)ViewModel:v......
  • vue 省市区三级联动插件
    首先是官网地址https://www.npmjs.com/package/element-china-area-data?activeTab=readme其次是个人应用vue部分<el-cascadersize="large":options="options"v-model="selectedOptions"></el-cascade......
  • Vue项目报错,点击浏览器报错信息定位不到报错代码,该如何优雅地调试代码?
    一、背景通过vue-cli服务运行项目,项目运行一切正常。但打包后,通过nginx部署运行,大屏展示模块报echartstypeError错误。但是点击浏览器报错信息,定位到的位置代码根本看不懂。经过一番寻找,发现打包时,webpack配置产生源码的属性为false。这样就会导致,打包后代码经过压缩加密,出现报......
  • vue3大屏适配
    1、定义初始化比例letstyle=ref({//定义默认比例width:1920,height:1080,transform:"scaleY(1)scaleX(1)translate(-50%,-50%)"})2、获取屏幕的宽高比列对象letgetScale=()=>{//获取屏幕的宽高比列constw=window.innerWidth/style.va......
  • [Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖
    preview-teleported="true" <el-table-columnprop="id"label="ID"width="80"align="center"sortable/><el-table-columnlabel="商品图片"width="85px"><template#default=&q......
  • Vue-cli 将px转化为rem适配移动端
    vue-cli2版本配置1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npmilib-flexible--save2.引入lib-flexible在main.js中引入lib-flexibleimport'lib-flexible/flexible'3.设置meta标签通过meta标签,设置设备宽度以及缩放比例<metaname="viewport......
  • vue tab切换滑动门
    <scriptsetuplang="ts">import{ref}from"vue";constselectName=ref('技术指标及标准')constnacigation=ref(['技术指标及标准','文献著作','报告模版','专家库/项目库',])</script><template&......
  • JMeter通过JDBC链接数据库并实现批量造数据
      在JMeter做自动化接口测试,需要对数据库进行增删改查等操作时,我们是无法像navicat一样直接写SQL的,需要通过一系列操作,才可以。 1、首先,第一步就是,在TestPlan中引用对应数据库的jar包,jar包可以在网上找,本文以MySQL为例,步骤如下:   2、第二步,在线程组下面添加JDBCC......