vue项目实现通过ip地址访问和localhost访问方式

目录
  • vue项目通过ip地址访问和localhost访问
  • vue项目中把localhost改成ip地址访问
    • vue2.0项目中 localhost改成ip地址访问
    • vue3项目改成ip地址访问

vue项目通过ip地址访问和localhost访问

为了实现vue项目启动服务，多个人可以查看，别人可以通过ip+端口访问

在config文件下的index.js文件中，修改host为：

host: '0.0.0.0'，

或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"

例如：

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

重启服务可以看到通过localhost和IP地址都可以访问到这个服务。

vue项目中把localhost改成ip地址访问

vue2.0项目中 localhost改成ip地址访问

config/index.js改成

host: '0.0.0.0', 
port: 8888,

打包后index.html空白 修改

webpack.prod.conf.js 里的

publicPath:'./',

vue3项目改成ip地址访问

1.在项目的根目录下创建文件vue.config.js

2.在该文件中进行相关配置，从而覆盖默认配置

module.exports = {
    outputDir:"course-analysis", //打包后的项目目录名称
    publicPath: './',
    devServer:{
        host: '0.0.0.0',
        port:8888
    }
};

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

    Vue项目不能使用localhost:8xx0进入项目,但是将localhost替换为127.0.0.1却可以进入. 解决办法: 进入文件 C:\Windows\System32\drivers\etc\hosts 用记事本打开 hosts 文件进行编辑,看看文件里是否有 127.0.0.1 localhost localhost 127.0.0.1 如果没有的话就加上,具体加入位置如下 # 127.0.0.1 localhost # ::1 localhost //加上的代码 127.0.0.

  • vue在手机中通过本机IP地址访问webApp的方法

    vue在手机中通过本机IP地址访问webApp的方法

    vue中通过localhost:8080,就可以访问浏览项目,但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp,或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访

  • 完美解决通过IP地址访问VUE项目的问题

    第一步 1.将config里面的host设置成0.0.0.0 host: '0.0.0.0', 2.修改package.json "scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", } 第一步和第二步都有ip,其

  • vue项目实现通过ip地址访问和localhost访问方式

    vue项目实现通过ip地址访问和localhost访问方式

    目录 vue项目通过ip地址访问和localhost访问 vue项目中把localhost改成ip地址访问 vue2.0项目中 localhost改成ip地址访问 vue3项目改成ip地址访问 vue项目通过ip地址访问和localhost访问 为了实现vue项目启动服务,多个人可以查看,别人可以通过ip+端口访问 在config文件下的index.js文件中,修改host为: host: '0.0.0.0', 或者在package.json文件下"scripts"的"dev

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • Vue项目中对index.html中BASE_URL的配置方式

    Vue项目中对index.html中BASE_URL的配置方式

    目录 Vue项目对index.html中BASE_URL的配置 问题 解决 Vue项目url中的<%= BASE_URL %> Vue项目对index.html中BASE_URL的配置 问题 有时候后端配置资源的默认访问路径的时候,可能会与前端打包时配置的默认根路径有所差异 比如:后端要访问静态资源的根路径为/static,而一般情况下,我们项目的vue.config.js中对BAES_URL的配置是/,或者不做配置,因为它默认的值也是/ 这个路径决定了我们的前端项目打包后获取静态资源的默认的

  • vue项目中自动导入svg并愉快的使用方式

    目录 引入图标的几种方式 远古时代 iconfont时代 svg时代 处理loader,对指定目录svg文件处理 安装loader 配置vue.config.js 接下来使用vue inspect看下目前的配置 编写一个自定义组件 编写一个js,实现svg自动化 至此就可以愉快的使用svg了 压缩优化 引入图标的几种方式 远古时代 一个个小图标png图片引入,代码中在一个个引用 spirit图片,将多个图标放在一张png图片上,通过background属性显示对应的图标 iconfont时代 将

  • 不能通过IP地址访问VUE项目的问题及解决

    目录 不能通过IP地址访问VUE项目问题 问题背景 问题解决 指定IP访问VUE项目 不能通过IP地址访问VUE项目问题 问题背景 目前项目是前后端分离的,VUE+SpringBoot,我拷贝下来前端项目在自己机器上运行,能通过localhost+端口号访问,但不能ton过IP地址访问 问题解决 上网找了很多资料,一开始以为是自己后端Java项目的问题,甚至在考虑tomcat的配置,可是tomcat是框架或编译器自带的,并不好修改. 后来发现应该是前端项目的问题,搜索了一下果然找到了问题根源 只

  • Vue项目通过network的ip地址访问注意事项及说明

    Vue项目通过network的ip地址访问注意事项及说明

    目录 Vue通过network的ip地址访问 在使用network进行局域网访问时注意 vue项目Network: unavailable的解决 解决办法 Vue通过network的ip地址访问 在config.js文件中的dev中修改host为0.0.0.0  devServer: { // 环境配置         host: '0.0.0.0',         port: 8080,         https: false,         hotOnly: false,      

  • vue项目在线上服务器访问失败原因分析

    珊妹儿遇到一个奇葩问题哈,跟大家伙来分享分享,首先因为刚接手的项目,我还没有线上服务器的连接信息,前端代码都是我打包好给别人,别人传到服务器的,传到线上服务器访问不了,这就是中间出现了问题. 所谓,打包就是压缩的概念,而压缩文件再次压缩就会导致文件成倍的增大,这中间就出现了很多问题,我们排除了很多问题都没找见原因,后来我就寻思拿U盘拷一份再试试,结果成功了!!!!! 据珊妹儿多年经验来分析,用U盘直接拷贝的是源文件,而压缩完传过去的压缩包再解压缩,就不是原来的文件了!嗯 应该是这个原因.....

  • 手把手教你实现Docker 部署 vue 项目

    手把手教你实现Docker 部署 vue 项目

    1.写在前面: Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考. Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码.运行环境.依赖库.配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的应用程序都会运行在

  • Nginx部署vue项目和配置代理的问题解析

    Nginx部署vue项目和配置代理的问题解析

    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目

随机推荐