Vue2版本如何使用ip访问?-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2版本如何使用ip访问?。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一,问题背景以及目的

前段时间研究了一下node,npm,express环境,vue-cli脚手架以及vue的版本,以及他们之间的关系,具体详见 vue环境部署,问题是vue2版本使用的npm run dev如果在服务器中的话,根本不能使用ip地址或者域名去访问,而vue3版本虽然自带npm run serve,但是我们只想部署2的版本的vue又该如何配置呢?

二,解决方案

前提:你已经使用vue脚手架创建出了一个vue项目,并使用编辑软件打开

1、在config下index.js文件中

//host: 'localhost' //替换成  host: '0.0.0.0'

2、package.json配置文件中

在"dev":"xxxxxxxxxx 这里添加下面的代码"

--host 0.0.0.0"

3、还需要配置下build文件夹下面的webpack.dev.conf.js文件夹

devServer: {useLocalIp: true, //将useLoackIp设置为true 就可以了}

如果没有useLocalIp字段的话,直接添加就好了

4、配置一下启动项目通过localhost 和本地ip地址访问

找到如下代码更改messages字段,以下代码中我已经进行了更改.直接复制粘贴即可

    // Add FriendlyErrorsPlugin   这下边进行了修改
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
           // messages: [`Your application is running here:             
           http://${devWebpackConfig.devServer.host}:${port}`],

           messages: [ `App runing at: `,` - Local: http://localhost:${port}`, ` - Network: 
           http://${require('ip').address()}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))