vue项目运行后如何自动在浏览器中打开

已于 2023-04-26 17:07:53 修改
阅读量4k 收藏 7
点赞数 2
分类专栏： vue webpack 文章标签： vue.js webpack
于 2022-09-05 11:11:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44594219/article/details/126700897
版权
vue 同时被 2 个专栏收录
19 篇文章 3 订阅
订阅专栏
webpack
6 篇文章 0 订阅
订阅专栏
本文介绍了两种方法来配置Vue项目，使其在启动后自动在浏览器中打开。方法一是通过在webpack.config.js或vue.config.js中设置devServer.open为true。方法二是通过配置transpileDependencies，并在package.json的scripts中添加--open选项来实现。这两种方法都能帮助开发者便捷地预览项目运行效果。
摘要由CSDN通过智能技术生成

方法一：配置open

在根目录webpack.config.js或vue.config.js中的module.exports里面配置devServer / open，将open属性值设置为true即可

 devServer: {
    host: 'localhost',
    port: 9000, // 端口号
    open:true, //运行后是否自动在浏览器打开
  },

方法二：配置transpileDependencies

第一步：在根目录webpack.config.js或vue.config.js中的module.exports里面配置transpileDependencies

transpileDependencies: true,//运行后是否自动在浏览器打开

第二步：在package.json中的scripts / serve 或 scripts / dev 的属性值后面加上 --open

"serve": "vue-cli-service serve --open",

在浏览器中运行Vue项目的方法
TechBurst的博客
10-02 1044
根据项目的需求和规模，选择合适的方法来在浏览器中运行Vue项目。当我们使用Vue开发应用程序时，我们需要在浏览器中运行和测试我们的项目。如果我们已经有一个本地服务器环境（例如Apache或Nginx），我们可以将Vue项目部署到本地服务器上，并在浏览器中访问它。Vue提供了一个CDN链接，我们可以直接在HTML文件中引入Vue，并开始编写我们的Vue应用程序。在浏览器中访问本地服务器的URL，即可看到Vue应用程序在浏览器中运行的效果。这将启动一个开发服务器，并在浏览器中显示Vue应用程序的效果。
一文教你学会vue前端项目创建与开发
最新发布
任聪聪的博客
09-07 1353
说明：自定义的项目结构对于我们后期的开发工作有着至关的作用，一个好的目录结构及配置能够在后续的工作中起到事半功倍的效果。timeout: 5000,//超时时间headers: {},});// 请求拦截器});},error => {// 响应拦截器},error => {},npm run dev 运行开发环境npm run b:prod 构建生产环境的代码。npm run b:stage 构建阶段环境的代码。
Vue 项目运行完成后自动打开浏览器【多种方法】
qq_22841387的博客
02-20 5280
本文介绍了几种在 Vue 项目中自动打开浏览器的方法，包括通过修改、配置文件、使用 Webpack 插件，以及通过环境变量动态配置。不同的方法适用于不同的场景，开发者可以根据自己的项目结构和需求选择合适的方案。通过合理使用这些配置，可以大大提高开发效率，减少重复的手动操作，让你更专注于业务逻辑的开发。提示：在生产环境中，建议关闭自动打开浏览器的功能，以避免不必要的浏览器窗口弹出影响服务器性能。
Vue项目启动自动在浏览器打开
Rovstephanie的博客
03-04 1782
默认情况下，Vue 项目使用的开发服务器通常会在终端中输出访问地址（如 localhost:8080），但并不会自动在浏览器中打开这个地址。
设置vue项目自动在浏览器中打开
wy3053的博客
09-08 562
设置vue项目自动在浏览器中打开
vue 启动项目时浏览器自动启动的四个方案（三种类型）。
仙途路漫漫其修远兮
05-10 5809
配置了不行那就自己手写个！！！
在脚手架vuecli怎么解决vue项目不能自动打开浏览器
User_XuKang的博客
10-29 858
1.如果是vuecli脚手架的版本在3或者4以上的用如下方法 方法一： 在项目中找到vue.config.js文件，如果没有就自己创建一个 ，加上以下代码 module.exports = { devServer: { open: true } } 方法二： 在项目中找到package.json文件在vue-cli-service serve 后面加上 --open 任选其一 2.如果是vuecli脚手架的版本在2用如下方法 首先找到confi..
默认浏览器设置及vue自动打开页面的方法
10-17
对于Vue开发者来说，他们经常需要在本地开发环境中启动项目时自动打开浏览器，以便实时查看项目运行结果。这时，可以利用Vue脚手架提供的命令来简化操作。在使用Vue CLI创建项目后，开发者通常会通过npm运行dev命令...
（Vue-Cli）配置开发时运行项目自动打开浏览器
面包不是超人。
03-22 1270
一、默认浏览器配置 打开电脑的控制面板，选择默认程序 2. 选择设置默认程序 3.找到web浏览器进行设置 二、在Vue-cli中配置开发中运行项目时自动打开浏览器 在根目录下的vue.config.js文件中添加配置项 根目录下的vue.config.js文件是Vue-cli的配置文件，可以到官方文档中查看更多配置。 ...
让webpack+vue-cil项目不再自动打开浏览器的方法
10-17
如果在开发过程中频繁重启项目，自动打开浏览器可能会变得烦人。例如，测试一个小功能修复，可能仅需几秒钟，但自动打开浏览器可能会需要更长时间，尤其是在开发大型应用时。这时候，开发者可能会需要关闭自动打开...
使用IDEA工具配置和运行vue项目及遇到的坑
08-26
安装完成后，我们可以在IDEA中使用vue插件来开发和运行vue项目。 二、搭建node.js环境 在配置和运行vue项目之前，我们需要首先搭建node.js环境。node.js是JavaScript的运行环境，我们可以从官网下载node.js并安装...
vue配置启动项目自动打开浏览器(三种方法)
热门推荐
Billow_lamb的博客
02-24 1万+
vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false； 设置为true即可(或者全局搜索autoOpenBrowser设置为true) 2.打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open 3.在根目录下新建vue.config.js文件 vue.config.js代码如下 module.exports = { d
vue项目自动打开浏览器
qq_40712151的博客
01-16 242
vue项目自动打开浏览器
运行vue项目的时候自动打开浏览器
m0_52243496的博客
08-24 265
1.安装 npm i open-browser-webpack-plugin --save 2.打开build里面的配置文件 3.在配置文件里面加两行代码 ①const OpenBrowserPlugin = require(‘open-browser-webpack-plugin’) ② new OpenBrowserPlugin({ url: ‘http://localhost:8081’ }) //浏览器地址 4.打开配置文件config，找到index.js 5.将index.js里面
vue配置项目启动时自动打开浏览器
Sylvasylva的博客
12-11 985
vue配置启动时自动打开浏览器。如果配置了open为true，没有配置host，项目启动时浏览器只会自动打开0.0.0.0:80的页面，而不会打开本地项目启动的正确地址。
VUE项目start后自动打开浏览器载入项目
qq_41391628的博客
10-19 1347
config文件夹下的index.js文件中 设置autoOpenBrowser: true module.exports = { dev: { autoOpenBrowser: true, } }  
vue自动打开浏览器
A2645765158的博客
03-06 353
vue自动打开浏览器
Vue项目启动后自动打开浏览器
weixin_50665010的博客
05-14 1547
vue-cli 覆盖webpack配置 vue项目每次启动时都需要复制链接地址打开浏览器，影响到开发效率，下面一行代码配置，解决问题，自动打开浏览器！ 项目根目录下新 vue.config.js（和src同级）补充devServer 代码如下 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer
vue项目中浏览器自动打开问题
qq_44794249的博客
07-06 864
vue项目中浏览器自动打开问题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值