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

 更新时间:2022年09月05日 17:15:27   作者:codernmx  
这篇文章主要介绍了vue项目实现通过ip地址访问和localhost访问方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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
    }
};

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 在elementui中Notification组件添加点击事件实例

    在elementui中Notification组件添加点击事件实例

    这篇文章主要介绍了在elementui中Notification组件添加点击事件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现发表评论功能

    vue实现发表评论功能

    这篇文章主要为大家详细介绍了vue实现发表评论功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue3编译报错ESLint:defineProps is not defined no-undef的问题

    vue3编译报错ESLint:defineProps is not defined&nbs

    这篇文章主要介绍了vue3编译报错ESLint:defineProps is not defined no-undef的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue+eslint+vscode配置教程

    vue+eslint+vscode配置教程

    这篇文章主要介绍了vue+eslint+vscode配置教程,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue-cli使用stimulsoft.reports.js的详细教程

    vue-cli使用stimulsoft.reports.js的详细教程

    Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计,编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法,一起看看吧
    2021-12-12
  • Element-ui tree组件自定义节点使用方法代码详解

    Element-ui tree组件自定义节点使用方法代码详解

    本文通过实例代码给大家介绍了Element-ui tree组件自定义节点使用方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue中props值的传递详解

    vue中props值的传递详解

    这篇文章主要介绍了vue中props值的传递,在vue中父组件要正向的向子组件传递数据或者参数,子组件接收到后根据参数的不同来进行对应的渲染,这个正向的数据传递在vue组件中就是通过props来实现的,需要的朋友可以参考下
    2009-05-05
  • 使用WebStorm开发Vue3项目详细教程

    使用WebStorm开发Vue3项目详细教程

    这篇文章主要介绍了使用WebStorm开发Vue3项目的相关资料,本文介绍了在WebStorm中使用Vue3、TypeScript、Sass开发项目的配置过程,包括版本兼容性问题、项目搭建、依赖包安装、代码检查工具配置、运行和调试等步骤,需要的朋友可以参考下
    2024-11-11
  • vue下axios拦截器token刷新机制的实例代码

    vue下axios拦截器token刷新机制的实例代码

    这篇文章主要介绍了vue下axios拦截器token刷新机制的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue.js实现简易折叠面板

    vue.js实现简易折叠面板

    这篇文章主要为大家详细介绍了JavaScript实现简易折叠面板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论