用vue的脚手架生成的项目自动打开浏览器

最新推荐文章于 2023-01-29 22:10:28 发布
最新推荐文章于 2023-01-29 22:10:28 发布
阅读量1k 收藏
点赞数
分类专栏： 前端框架vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40283784/article/details/86745762
版权

用vue搭建的脚手架不会自动打开浏览器，解决方法：

打开config目录下的index.js文件，将autoOpenBrowser: false,改为autoOpenBrowser: true,即可

另注：本人寻大厂或潜力公司前端，node开发工作机会，base:上海，广州，深圳，杭州，有意请加微信lpd65790092

 

Lpd_Reason
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue脚手架项目默认访问页面
xzy的博客
05-02 3269
文章目录vue脚手架项目默认访问页面index.html首页/src/main.js文件App.vue组件内容src/router/index.js文件内容Login组件内容测试 vue脚手架项目默认访问页面 index.html首页 vue脚手架启动之后，默认会访问脚手架项目根目录下的index.html首页，如下图： /src/main.js文件 /src/main.js文件的配置，如下图： App.vue组件内容 App.vue组件的内容如下图： src/router/index.js文件内容
vue项目实现github在线预览功能
12-11
最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目，有点小激动，想把它上传到 github 并展示一下预览效果，结果踩了好多坑，折腾了大半天才弄好。 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目，并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后，项目的目录下会生成一个 dist 文件夹，它里面又包含一个 static 文件夹和一个 index.html 文件，这是 webpack 最终打包好的文件   我们先尝试在浏览器打开 index.html   咦，为什么页面显示是空白的？打开控制台，细心的朋友可能会
Vue项目启动后跳转到制定路由页面
见证自己学习,成长的记录
01-29 6925
Vue项目启动后跳转到制定路由页面
【vue】vue项目启动设置默认启动页
Season CSDN博客
12-21 9375
vue项目启动设置默认启动页
脚手架项目默认的首页index.html。以及App.vue组件中的router-view标签，默认是渲染的哪个组件？以及这个组件是可以在路由映射文件下配置的。
xzy的博客
05-02 4037
文章目录脚手架项目默认的首页index.html。以及App.vue组件中的router-view标签，默认是渲染的哪个组件？以及这个组件是可以在路由映射文件下配置的。vue脚手架项目默认访问的页面为什么App.vue组件会代替index.html首页中id为app的div元素？App.vue组件的内容在路由映射文件index.js中配置路由映射关系Home.vue组件测试 脚手架项目默认的首页index.html。以及App.vue组件中的router-view标签，默认是渲染的哪个组件？以及这个组件是可
Vue进阶（幺陆叁）：vue项目启动后自动打开页面并设置默认浏览器
IT全栈 华强工作室
01-22 5107
以windows 系统为例，操作方法如下： 一、修改默认浏览器 设置谷歌浏览器为默认浏览器。 1、首先打开“开始菜单”，点击“控制面板”； 2、在“控制面板”里面找到“默认程序”，进入后点击“设置默认程序”； 3、加载好后选择 “谷歌浏览器”； 4、选择“将此程序设置为默认值”，如果安装360安全卫士，必须先退出360安全卫士，否则设置不起效果。 5、选择“选择此程序的默认值”，全选所有的扩展名，保存。 二、vue项目启动自动打开页面 若需要Vue项目启动后自动打开浏览器展示页面，还需要打开config文件
在Vue项目中,防止页面被缩放和放大示例
12-13
现在vue的脚手架生成项目之后我们会发现index.html页面中。 在head标签中，我们会看到meta标签中有一条显示是 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 但是...
详解vue-cli快速构建项目以及引入bootstrap、jq
12-12
vue-cli脚手架工具快速构建项目架构： 。。首先默认了有已经安装了node。。。  npm install -g vue-cli 全局安装vue-cli  vue init webpack cnm 生成项目名为cnm的的项目模板，cnm自定义 npm install 到cnm...
electronic-vue：具有vue-cli脚手架，常见Vue插件，electron-packagerelectron-builder，unite2e测试，vue-devtools和Webpack的Electron＆Vue.js快速入门样板
02-02
用vue构建电子应用程序的样板（听起来差不多）。 总览 该项目的目的是消除使用vue手动设置电子应用的需求。 电子VUE需要的优势vue-cli脚手架， webpack与vue-loader ， electron-packager或electron-builder ，以及...
基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip
06-20
该项目资源主要针对计算机、自动化等相关专业的学生或从业者下载使用，也可作为期末课程设计、课程大作业、毕业设计等。 具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现类似其他功能。 ## ...
vue项目启动设置默认启动页
热门推荐
Yajyaj123的博客
09-11 1万+
vue项目启动设置默认启动页
VUE_vue脚手架开发启动自动打开页面
小歪博客
10-15 466
根目录 vue.config.js 文件，没有则新建 module.exports = { devServer: { open: true } }
vue脚手架打开项目直接进入浏览器
m0_64380162的博客
12-04 431
veu 浏览器 地址
【Vue】vue脚手架run dev之后如何自动启动浏览器
Y.Cheng的博客
06-12 6535
vue脚手架 npm run dev 启动浏览器 之前vue脚手架npm run dev 就会自动启动浏览器，但是现在的脚手架会出现如下图 看图： 你的应用程序在这里运行：http://localhost:8080 需要手动 Alt+点击 解决办法： 找到config文件夹下面index.js文件,里面有个dev方法，修改autoOpenBrowser状态为true。看...
vue项目 编辑器保存代码后自动更新浏览器页面内容
zhougushen的博客
10-17 9268
第一步，在vue项目中找到vue.config.js文件,注意:(2019年10月后创建的新vue项目，之前的是webpage.config.js文件) module.exports = { devServer: { open: true, port: 8812, }, lintOnSave: false } lintOnSave:false是解决eslint过多空格报错问题。 devServer：{ open:true//启动vue..
在脚手架vuecli怎么解决vue项目不能自动打开浏览器
User_XuKang的博客
10-29 809
1.如果是vuecli脚手架的版本在3或者4以上的用如下方法 方法一： 在项目中找到vue.config.js文件，如果没有就自己创建一个 ，加上以下代码 module.exports = { devServer: { open: true } } 方法二： 在项目中找到package.json文件在vue-cli-service serve 后面加上 --open 任选其一 2.如果是vuecli脚手架的版本在2用如下方法 首先找到confi..
如何用npm生成脚手架vue3项目
最新发布
09-12
### 回答1： 要用npm生成脚手架vue3项目，你可以使用vue-cli命令行工具，具体操作步骤为：1. 安装vue-cli：npm install -g @vue/cli；2. 创建项目：vue create project-name；3. 选择Vue版本：选择Vue 3；4. 选择项目模板：根据自己的需要选择项目模板；5. 安装依赖：npm install；6. 开始项目：npm run serve。 ### 回答2： 使用npm生成Vue3项目的脚手架，你需要按照以下步骤进行操作： 1. 确保你已经安装了npm及Node.js。你可以在命令行中输入以下命令检查是否已正确安装： ``` npm -v node -v ``` 2. 在命令行中使用npm安装Vue CLI。在命令行中输入以下命令进行安装： ``` npm install -g @vue/cli@next ``` 这会安装Vue CLI的最新版本，因为Vue3需要安装Vue CLI的"next"版本。 3. 安装完成后，你可以使用以下命令检查Vue CLI是否已正确安装： ``` vue --version ``` 4. 创建一个新的Vue3项目。在命令行中使用以下命令： ``` vue create <project-name> ``` 这里的`<project-name>`是你想要为你的项目选择的名称，可以根据个人喜好进行命名。 5. 在创建项目时，你将被提示选择预设选项或手动配置。如果你是Vue初学者，建议选择默认的预设选项。如果你更熟悉Vue的配置，可以选择手动配置，然后根据需要进行自定义设置。 6. 当项目创建成功后，进入到项目目录中。使用以下命令切换到项目目录： ``` cd <project-name> ``` 7. 启动项目。在命令行中输入以下命令： ``` npm run serve ``` 这会启动开发服务器，并在本地主机上的默认端口上运行你的Vue3应用程序。 通过按照以上步骤操作，你可以使用npm生成一个Vue3项目的脚手架，并开始进行开发。希望对你有所帮助！ ### 回答3： 生成脚手架是为了快速创建项目并预先配置必要的文件和依赖项。要使用npm生成Vue 3项目的脚手架，可以按照以下步骤进行： 1. 首先，确保已经在本地安装了Node.js和npm。可以通过在终端上输入`node -v`和`npm -v`来验证它们的安装情况。 2. 打开终端（命令提示符）并导航到要创建项目的目录。 3. 接下来，使用npm全局安装Vue脚手架。在终端上输入以下命令： ``` npm install -g @vue/cli ``` 这将安装最新版本的Vue脚手架。 4. 此时，我们已经可以使用Vue的脚手架命令来创建项目。在终端上输入以下命令： ``` vue create projectName ``` 其中，`projectName`是要创建的项目的名称。可以根据自己的需要进行更改。 5. 当您运行上述命令时，会出现一个选项列表，您可以选择要在新项目中包含的特性或预设配置。按下回车键即可使用默认选项。 6. 等待一段时间，直到脚手架在您的目录中生成一个新的Vue项目。生成的项目会包含所选特性和配置，以及一些默认的Vue文件和依赖项。 至此，您已经成功用npm生成了一个Vue 3项目的脚手架。您可以在项目目录中运行`npm run serve`以启动开发服务器，并在浏览器中查看项目运行效果。根据需要，可以在生成的项目中继续进行开发和配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值