vue项目如何实现运行完项目就跳转到浏览器

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量570 收藏 8
点赞数 10
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karlaofsky/article/details/135880827
版权

在package.json中的启动命令中添加--open参数可以实现在Vue项目编译后自动打开浏览器的功能。

通过这样的设置，在运行npm run dev时，Vue项目编译完成后会自动打开默认浏览器并加载应用程序。 

娃哈哈哈哈呀
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
详解vue项目打包步骤
01-19
终端运行命令 npm run build 打包成功的标志与项目的改变，如下图：  点击index.html，通过浏览器运行，出现以下报错，如图： 那么应该如何修改呢？ 具体步骤如下： 1、查看package.js文件的scripts命令 2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件 3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./
vue-neo4j:vue使用D3对neo4 j进行可视化-源码开发技术-其它
06-07
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地，启动neo4j服务 进入到该工程的根目录，输入命令：npm run update进行npm包的导入 使用命令：npm run dev启动该工程 默认端口是：8081 neo4j账号信息： 网址：bolt：// localhost 用户名：neo4j 密码：密码 启动服务 npm run dev并将您的Web浏览器指向http://localhost:8081 。 项目截图 目录结构 ├──index.html入口页面─────────────────────────────────────────────────────────────── dev-client.js开发服务器热重载脚本，主要实现实现开发阶段的页面自动刷新│├──dev-server.js运行本地开发服务器│├──utils.js构建相
课程设计-基于Vue+Express实现的新闻聚合网站项目源码+运行说明(含前端+后端).zip
01-09
1.项目代码均经过功能验证ok，确保稳定可靠运行。欢迎下载体验！下载完使用问题请私信沟通。 2.主要针对各个计算机相关专业，包括计算机科学、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师、企业员工。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。在使用过程中，如有问题或建议，请及时沟通。 5.期待你能在项目中找到乐趣和灵感，也欢迎你的分享和反馈！ 【资源说明】 课程设计-基于Vue+Express实现的新闻聚合网站项目源码+运行说明(含前端+后端).zip 本次项目是Web编程项目demo，为新闻聚合网站（聚合了网易新闻/新浪新闻/新华网/人民网），在此网站中有独立的热搜模块（较为简陋），四个新闻平台热点关键词词云及其数据量，同时您可以在网站中进行筛选搜索，结果会以模态框形式弹出，点击对应的结果即可跳转到对应的新闻原URL，所有结果均为定时爬虫所爬取。 本站使用了Vue3+NaiveUI作为前端框架与组件，使用了Nodejs+Express作为项目后端，阿里云MySQL数据库作为项目数据库。 项目运行 本项目前后端分离，前端为front文件夹，后端为back文件夹，进入前后端文件夹后分别运行 ```shell npm install ``` 下载相应的module文件（如果没有的话） 由于本项目为demo项目，因此并没有做过深的负载等考虑，为开发模式，仅作为演示，因此Vue项目并未打包，均为源码开发模式呈现。 在front文件夹下运行 ```shell npm run serve ``` 启动前端测试（默认运行在8080端口) 在back文件夹下运行 ```shell node main.js ``` 启动服务器（默认运行在8000端口） 然后打开浏览器访问http://localhost:8080/即可测试项目 项目组成 ### 前端 前端为单页面应用，所有交互均以模态框（或类模态框）进行，结构如下： ``` |-- front/src |-- main.js |-- App.vue |-- components | |-- Hot.vue | |-- Display.vue | |-- Result.vue |-- assets | ... ``` 其中App.vue负责整体页面（主页），Hot.vue负责热搜模态框，Display.vue负责展示模态框，Result.vue负责搜索结果展示模态框（包含分页）。 ### 后端 后端由于是第一次写nodejs后端，因此封装或者模块化都比较简陋，以后有兴趣的话可以将后端用Python或Java重写，结构如下： ``` |-- back |-- main.js |-- crawler | |-- common.js | |-- crawler.js | |-- websites | |-- wangyi.js | |-- xinlang.js | |-- xinhua.js | |-- renmin.js | ... ``` 主体部分还是在爬虫上，由于针对不同网站的爬虫会有所不同，因此我将匹配的关键词放在了websites文件夹中的每个js文件中，种子页面处理放在crawler.js中，common.js用来放一些常用模块的二次封装（或者测试的时候可以拿来用，比如我的连接数据库操作是放在main中的，其他地方没有数据库，因此测试某个网站是否成功导入数据库中也可以在common中加入数据库连接操作并exports出来）。 其余定时器，search，热搜，展示的数据均在main.js中生成（这里是由于nodejs不太熟悉不会很好的封装，因此统一整合到了main中）
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 使用 npm run dev命令后 自动打开浏览器为谷歌
虎康的博客
07-12 1141
vue 启动后，想要其自动打开指定浏览器（谷歌）并设置要打开的IP地址和端口号。
windows环境下，vue启动项目后打开chrome浏览器
in_the_road的博客
02-19 2964
windows环境下，vue启动项目后打开chrome浏览器
设置Vue启动自动打开Chrome
^_^TaeYang-Jade^_^
04-17 1515
以下为windows 系统操作，仅供参考。 一、修改默认浏览器 个人偏好谷歌浏览器，设置谷歌浏览器为默认浏览器。 1、首先打开“开始菜单”，点击“控制面板”； 2、在“控制面板”里面找到“默认程序”，进入后点击“设置默认程序”； 3、加载好后选择 “谷歌浏览器”； 4、选择“将此程序设置为默...
运行npm run dev命令时自动打开浏览器的设置（vue）
weixin_43694465的博客
04-23 2895
框架搭建好过后输入npm run dev的时候不会直接打开浏览器，在config文件夹找到index.js文件夹 把autoOpenBrowser: false改为autoOpenBrowser: true，从新在命令行输入npm run dev，这是就会自动打开浏览器。 如图修改 路径 config/index.js ...
启动Vue项目设置默认浏览器为Chrome
Dylan1022520的博客
03-23 4441
方法一： 1.打开【控制面板】(右键win，选择搜索，输入控制面板) 2.打开【默认程序】 3.选择【设置默认程序】 4.修改默认浏览器为Chrome 方法二： 1.打开设置 （窗口处右键 -- 设置） 2.选择【应用】 3.选择【默认应用】 4.更改默认方式为Chrome ...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
网上流行的解决方案是将assetsPublicPath: ‘/’改成’./’，下面说一下这个解决方案的...Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览器的时候出现white label, 也就是404错误，解决的方案基本是把er
vue 页面回退mounted函数不执行的解决方案
10-15
主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目运行后自动跳转到浏览器
weixin_47384925的博客
11-11 841
在项目中找到packag.json 在启动指令后面 加上 --open 就可以了 ，快去尝试一下吧！！
vue项目实现，项目启动完毕，自动跳转浏览器打开项目
逆风优雅的博客
04-26 1976
当我们启动完项目后，直接跳转页面到 localhost . 方法是： 1. 可以在启动的命令中 加上 --open 2. 在vue.config.js文件中设置open:true
使用express创建的前端项目，项目启动后如何在浏览器自动打开
m0_47999208的博客
10-20 266
要实现在浏览器自动打开项目，可以在启动项目时使用。方法来打开浏览器，并指定要打开的URL为。保存文件后重新启动项目，浏览器会自动打开。之后，在项目的入口文件中（通常是。以上代码在项目启动完成后调用。库来执行打开浏览器操作。首先，使用以下命令安装。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 668
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
vue app跳转到通讯录
06-10
在Vue App中跳转到通讯录需要使用Cordova插件，并且需要在移动端环境下运行才能跳转到通讯录。以下是一些步骤： 1. 安装Cordova插件 在Vue项目中安装Cordova插件，使用以下命令： ``` cordova plugin add cordova-plugin-contacts ``` 2. 添加跳转到通讯录的代码 在Vue组件的方法中添加以下代码： ``` if (navigator.contacts) { navigator.contacts.pickContact(function(contact) { console.log(contact); }, function(error) { console.log(error); }); } else { console.log("Contacts plugin not found"); } ``` 以上代码会打开通讯录页面，用户可以选择一个联系人。选择联系人后，会返回一个Contact对象，包含联系人的信息。 注意：以上代码需要在移动端环境下运行才能跳转到通讯录页面。如果在浏览器中运行，会提示“Contacts plugin not found”错误。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

娃哈哈哈哈呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值