vue项目配置同一局域网可使用ip访问的操作

1、检查 package.json文件，scripts.dev设置 host改成 "0.0.0.0"

2、config文件中找到 index.js 文件的host改成 "0.0.0.0"

此处的"0.0.0.0"可以改成自己的ip，重启项目就可以了

补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案

今天他们遇到一个很有意思的bug，用@vue/cli创建项目的时候报错了，还是个从来没见过的报错：

一开始以为是版本问题，毕竟报错信息上写着update，但是cli的版本是最新的，而且询问之后，node和npm版本也是最新的（12.16.1，截止我写这篇文章的时候是最新的）；最要命的是，也没有老版本的vue-cli……

这就非常有意思了。按照惯例，遇到前端的问题，第一反应就是卸载重装，一套操作行云流水：

npm uninstall -g @vue/cli
npm cache clean --force
npm install -g @vue/cli

然而并没有什么用，查了半天网上也找不到相关的报错，这就很尴尬了。

后来我注意到下面有个yarn的输出，难道cli内建的是yarn？但是这不应当：

虽然觉得很不可思议，但我还是决定看看yarn的版本，yarn有重大嫌疑。果然：

问题找到了。但是这是啥？Hadoop？

后来才想起来，yarn同时也是Hadoop的一部分，用来调度资源的：

从环境变量里移除Hadoop的yarn之后，就能正常创建项目了。

但是我还有一个问题没有解决，为什么cli会使用yarn？我这里的cli用的是npm啊。对比~/.vuerc之后，发现我这里的配置是这样的：

{
 // ...
 "packageManager": "npm"
}

他那里的配置是：

{
 // ...
 "packageManager": "yarn"
}

后来听他说，他第一次安装cli的时候，好像选的是yarn……

以上这篇vue项目配置同一局域网可使用ip访问的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue设置动态请求地址的例子

    需求:在开发和生产环境下,请求不同的地址(http or ws),使其置入线上环境,无论是什么域名都不用手动更改请求地址 思路:使前端请求接口地址简单化 上代码:在vuex中设置总的接口地址,然后在生产和开发环境下配置不同的地址 export const configUrl = { url: process.env.API_HOST, ws: process.env.API_WS } 然后在config文件夹中,设置dev.env.js和prod.env.js module.exports =

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • vue 本地服务不能被外部IP访问的完美解决方法

    解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 '0.0.0.0' { // ..., host: '0.0.0.0', port: 8080, // ... } 修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: { clientLogLevel: 'warnin

  • vue项目配置同一局域网可使用ip访问的操作

    1.检查 package.json文件,scripts.dev设置 host改成 "0.0.0.0" 2.config文件中找到 index.js 文件的host改成 "0.0.0.0" 此处的"0.0.0.0"可以改成自己的ip,重启项目就可以了 补充知识:@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug,用

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue项目配置使用flow类型检查的步骤

    你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug.Flow就是JavaScript的静态类型检查工具,该库的目标在于检查JavaScript中的类型错误,开发者通常不需要修改代码即可使用,故使用成本很低.同时,它也提供额外语法支持,使得开发者能更大程度地发挥Flow的作用. 一.flow的安装 flow可以直

  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转义等方法可以使构建代码完全混淆,达到无法恢复源码甚至无法阅读的目的. 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置

  • vue项目中使用rem,在入口文件添加内容操作

    在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: <script> window.onload = function () { var setRem = function () { // UI设计稿的宽度 var uiWidth = 1200; // 移动端屏幕宽度 var winWidth = document.documentElement.clientWidth; // 比率 var rate = winWidth / uiWidth; //

  • vue项目如何让局域网ip访问配置设置

    vue项目如何让局域网ip访问配置设置

    目录 vue让局域网ip访问配置设置 vue局域网使用ip无法访问的解决 vue让局域网ip访问配置设置 在开发中,为了让同一局域网的小伙伴,都可以通过IP地址访问到vue-cli搭建的项目,要怎么配置呢? 第一步:修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’ 第二步:检查 package.json 文件里进行配置,scripts.dev配置是否设置 host为‘0.0.0.0’ 这里我要强调下,第一步和第二步都有ip,其实第二步优先级高,这里第二步的ho

  • 详解如何在你的Vue项目配置vux

    详解如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux. 1.项目里安装vux npm install vux --save 2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置)

  • 使用vue项目配置多个代理的注意点

    使用vue项目配置多个代理的注意点

    在Vue项目的开发过程中,为了本地调试方便,我们通常会在 vue.config.js 中配置 devServer 来在本地启动一个服务器,在这个选项中,我们会配置proxy 属性来将指向到本地的请求(例如: /api/action) 代理到后端的开发服务器上(例如: http://xxx.xxx.xxx/api/action) devServer: { port: 8081, proxy: { '/api/action': { target: 'http://192.168.200.106:81

  • vue项目配置element-ui容易遇到的坑及解决

    vue项目配置element-ui容易遇到的坑及解决

    目录 vue配置element-ui遇到的坑 步骤1.npm安装 步骤2 步骤3.测试 vue element-ui需要注意的问题 vue配置element-ui遇到的坑 注意:本文章参照element-ui官方文档,快速上手部分,的部分教程 步骤1.npm安装 npm i element-ui -S 步骤2 2-1.完整引入 在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import

随机推荐