使用vue-cli安装项目中devServe 设置open为true的时候浏览器启动两次的解决办法

最新推荐文章于 2024-05-12 07:07:59 发布
最新推荐文章于 2024-05-12 07:07:59 发布
阅读量7.2k 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue-cli浏览器自启动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37309764/article/details/90722192
版权

在package.json中把scripts下的server属性配置后面加上--open就可以了

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "prod": "vue-cli-service build --mode development"
}

 

小马哥learn
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
详解最新vue-cli 2.9.1的webpack存在问题
08-28
本文详细介绍了 Vue-cli 2.9.1 中的 Webpack 问题，主要解决了最新版本的 Vue-cli 中的 Webpack 配置问题，並且提供了接口设置问题的解决方案。 一、Vue-cli 2.9.1 中的 Webpack 问题 在最新版本的 Vue-cli 中，...
vue-cli3配置与跨域处理方法
10-16
Vue CLI 3 是 Vue.js 官方提供的一个现代化的构建工具，用于快速搭建 Vue.js 项目。相较于 Vue CLI 2，它提供了更快的初始化速度、更简洁的配置以及更强大的功能。本文将详细介绍 Vue CLI 3 的安装、配置，以及如何...
Vite 4.x 下 devServer代理无效的问题解决
Maskman的专栏
05-21 1554
当前准备开发一个新的管理系统项目，使用 Vue3 + Vite进行构建，在连接后端服务器时候出现了跨域访问的问题，参考网上大多文章，都是在 vite.config.js下，增加 devServer配置项用于搭建本地内置的代理服务器，实现开发环境下跨域访问。但按这些文章介绍的办法，访问后端时，都报404访问错误，用POSTMAN等测试工具，也有同样的异常。target: 'http://xxx.xxx.xxx.xxx:9001',// 代理目标的基础路径。
Vue devServe配置open:true时 自动打开两个浏览器窗口
a736755244的博客
04-25 636
Vue devServe 配置 open:true 时 自动打开两个浏览器窗口
2024年Web前端最新解决跨域 devServe vue(1)，字节跳动Andorid岗25k+的面试题
最新发布
2401_84435152的博客
05-12 531
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】那么浏览器为什么会报错呢？因为浏览器基于安全考虑而引入的同源策略当协议+域名+端口三者都相同时，才不会产生跨域问题，即同源。此时才能读取到服务端的响应如何解决跨域。
vue项目中devServe 设置open为true的时候浏览器启动两次的解决办法
芳草萋萋鹦鹉洲哦
02-18 3919
使用潘家成大佬的vue-admin-template框架，发现npm run dev后浏览器总是启动两次，出现两个相同的页面。 下面说一下解决办法： vue.config.js 里的devServer里的open选项改为false， package.json中的scripts改为 {“dev”: “vue-cli-service serve --open”} 然后就万事大吉辽 ...
vue-cli3项目中添加open:true报错，百度半天无法解决
weixin_44362368的博客
11-25 2323
刚开始没有加自动打开浏览器的可以正常运行 后面添加了 出现events.js:292 throw er; // Unhandled 'error' event ^ Error: spawn cmd ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19) at onErrorNT (internal/child_process.js:465:16) a
【vue】devserver及其配置
热门推荐
qq_42425551的博客
03-08 4万+
一、devserver背景介绍 每次改代码都需要重新部署, 或者只改变修改代码行的效果 所以出现了devserver本地服务 为了完成自动编译，webpack提供了几种可选的模式 方式一：webpack watch mode 实现方法一： 在导出的配置中，添加watch:true 实现方法二： 在启动webpack的命令中，添加–watch的标识 方式二：webpack-dev-server(常用) 二、webpack-dev-server 上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏
关于 VueCli中 devserve
weixin_69506221的博客
11-03 1037
每日一个知识点 第一天
vue-peerjs:在Vue应用中使用PeerJS实现WebRTC
03-27
在项目中引入`vue-peerjs`，并在Vue组件中使用。通常，你需要在`main.js`中全局注册`vue-peerjs`： ```javascript import Vue from 'vue' import App from './App.vue' import Peer from 'peerjs' import VuePeerjs...
解决vue中使用proxy配置不同端口和ip接口问题
12-01
　使用vue-cli创建的项目，开发地址是localhost:8080，由于后台开发不同的模块，导致每个模块请求的ip和端口号不一致 　例如：http://192.168.10.22:8081 或者 http://192.168.10.30:9999等 解决问题： 　在vue....
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
10-17
可以使用vue-cli脚手架创建新项目，然后进入项目目录，通过npm安装所需的vuex和axios库： ```bash npm install vuex npm install axios ``` 接下来，在`main.js`中引入axios并将其挂载到Vue的原型链上，以便在所有...
vue-cli 版本2.0项目搭建和详解
一个懒惰前端的博客
05-18 3605
安装Vue-cli 第一步 安装vue-cli首先需要安装node，如果你的电脑已经安装node，就可以使用node自带的npm来安装vue-cli 你可以在命令行工具里输入node -v, npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node 第二步 npm 命令安装vue-cli npm install vue-cli -g -g :代表全局安装。安装完成后，命令行输入vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。 第三步：使用
论如何写出一篇高质量的英文论文_英文论文怎么写博客
2401_84435866的博客
05-04 413
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
vue配置的devServer
kaixindewanshua的博客
09-28 614
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。 devServer配置开发环境服务器。 DEV_SERVER=http://10.10.201.87 REQUEST_PRE=/req //api.js export default { getTableData(options) { return new Promise( resolve => { Request.ge
解决 vue-cli 3构建的vue项目启动时自动打开浏览器问题
y_0232的博客
10-18 1739
在根目录下新建vue.config.js文件 module.exports = { devServer: { open: true } }
Vue devServer 开发时代理配置(解决跨域问题),附部署时nginx反向代理
aaassddd_a的博客
12-02 1万+
为什么跨域？ 因为浏览器是由同源策略的 devServer 就是vuecli在开发环境给我们提供的一个代理服务器,(使用的是 http-proxy-middleware) devServer 就相当于 用一个 中间件服务器来访问，服务器是没有 同源策略的 devServer: { host: "localhost",//配置本项目运行主机 port: 8080,//配置本项目运行端口 //配置代理服务器来解决跨域问题 proxy: { // ‘/ap.
vue中 devServer
qq_42692714的博客
04-29 6033
在vue项目根目录中创建一个js vue.config.js module.exports = { runtimeCompiler: true, devServer: { proxy: { // 匹配请求路径中的字符， // 如果符合就用这个代理对象代理本次请求，路径为target的网址， // chang...
vue-cli3启动服务自动打开浏览器配置
Hello_yihao的博客
01-17 1万+
vue-cli3启动服务自动打开浏览器配置 1.首先创建一个vue-cli3项目。 2.找到package.json文件 3.找到配置项‘scripts’ 4.找到配置项‘serve’ 5.修改下，加个字段 “serve”: “vue-cli-service serve --open” ...
使用vue/cli-service构建devserve和proxy代理
06-07
在使用 Vue CLI 构建开发环境时，可以通过 `vue.config.js` 配置文件来配置 `devServer` 和 `proxy`，实现本地开发服务器和代理请求的配置。 1. devServer `devServer` 是用于配置开发服务器的选项。在 `vue.config.js` 文件中，可以添加以下配置： ```javascript module.exports = { devServer: { port: 8080, // 端口号 open: true, // 自动打开浏览器 compress: true, // 是否启用 gzip 压缩 hot: true, // 热更新 proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 其中，`port` 表示本地服务器的端口号，`open` 表示是否自动打开浏览器，`compress` 表示是否启用 gzip 压缩，`hot` 表示是否启用热更新。 另外，`proxy` 选项用于配置代理。上面的配置表示，所有以 `/api` 开头的请求都会被代理到 `http://localhost:3000` 上，`changeOrigin` 表示是否改变请求头中的 Origin 字段，`pathRewrite` 表示是否重写请求路径。 2. proxy 如果需要对特定的请求进行代理，可以在 `vue.config.js` 文件中配置如下： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } }, '/foo': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/foo': '' } } } } } ``` 上面的配置表示，所有以 `/api` 开头的请求都会被代理到 `http://localhost:3000` 上，而所有以 `/foo` 开头的请求则会被代理到本地服务器上。 总的来说，通过 `vue.config.js` 文件的配置，可以方便地配置本地开发服务器和代理请求，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值