vue-cli 使用官方脚手架搭建以后,本地的config配置已经没有了,默认打开localhost,无法ip访问

只要修改项目目录配置和防火墙配置

1.在项目根目录下面加一个文件vue.config.js

module.exports = {
devServer: {
host: '0.0.0.0', //host改成自己的IP
port: ,
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {}
}
}

2.修改防火墙

控制面板

点击以后选择箭头的三个地方,都分别点开,在圈出来的地方选择允许

点击确认

3

vue-cli 局域网可访问配置的更多相关文章

  1. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

  2. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  3. vue——同一局域网内访问项目

    1.想要在手机上访问本地的vue项目,首先要保证手机和电脑处在同一局域网内(连着同一个无线网) 2.将你电脑的ip设置为固定ip(ipconfig查找本地的ip,然后修改它,改为你想变的数字) 3.在 ...

  4. wampserver2.5局域网IP访问配置

    wampserver2.5集成环境的安装和使用就不多说了,网上有很多教材.安装好后找到apache的配置文件httpd.conf.默认位置是: swap安装目录\wamp\bin\apache\apa ...

  5. @vue/cli 3.x 版本配置productionGzip提高性能

    第一步:安装插件 npm i -D compression-webpack-plugin 第二步:引入.在文件vue.config.js里导入compression-webpack-plugin,并添 ...

  6. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  7. 使用vscode开发vue cli 3项目,配置eslint以及prettier

    初始化项目时选择eslint-config-standard作为代码检测规范,vscode安装ESLint和Prettier - Code formatter两个插件,并进行如下配置 { " ...

  8. Vue项目使用域名访问配置

    1. 编辑C:\Windows\System32\drivers\etc文件夹中的hosts文件,在末尾添加127.0.0.1 www.local.com(你的自定义域名) 注意:如果该文件夹没有ho ...

  9. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

随机推荐

  1. 记录6--Java栈堆

    class Person { int age; } public class LearnHeap { public static void main(String args[]){ int a=18; ...

  2. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  3. 第1节 Scala基础语法:13、list集合的定义和操作;16、set集合;17、map集合

    list.+:5 , list.::5: 在list集合头部添加单个元素5 : li1.:+(5):在list集合尾部添加单个元素5: li1++li2,li1:::li2:在li1集合尾部添加il2 ...

  4. Android 记住密码和自动登录界面的实现(SharedPreferences 的用法)

    原文:http://blog.csdn.net/liuyiming_/article/details/7704923 SharedPreferences介绍: SharedPreferences是An ...

  5. Android Studio的HAXM不支持虚拟机

    因为我的计算机是服务器,不支持虚拟机,所以报这个错了. 解决方式是直接连接物理手机,打开USB调试,安装驱动,运行项目即可.

  6. npm和npx

    npx 指令会先在项目的node_modules里面找资源包 npm info 包名称  [查看资源包的信息]

  7. 02-02Android 学习进度报告二

    今天我主要学习了Android的UI基础布局知识,主要是学习View与ViewGroup的概念以及其区别. 首先是代码说明: <?xml version="1.0" enco ...

  8. 二、Navicat、IDEA、nopad、eclipse、excle工具使用、问题、快捷键

    1.Navicat工具: 目的:本地数据库与远程数据库之间数据导入导出 步骤1:文件--新建oracle链接/mysql的连接 步骤2:工具-选项:将本地oracle的bin\oci.dll 的路径复 ...

  9. VUE.JS和小程序的共通之处

    我是先学习的小程序开发,之后才了解到vue.js.也是一直没有时间去看相关vue.js的知识和内容.现在回顾起来,小程序和vue.js都是前端的内容. 例如小程序中的目录结构物page+app.js+ ...

  10. Day10 - D - 矿场搭建 HYSBZ - 2730

    煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一个挖煤点坍塌之后,其他挖 ...