Vue 项目启动后在浏览器自动打开

想要实现 Vue 项目在浏览器自动打开，只需要几步简单的操作就可以实现了。我这里是使用了Vue3.x的脚手架创建的项目，项目的目录架构你们有可能是和你们的不太一样，但是道理是这样子的道理。其他话不多说，直接上步骤安排。

1.找到 Vue 项目的 package.json 文件，

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

在 scripts 代码块的 server 的后面加上 --open ，然后重新启动项目。做到这里的时候其实有些人的项目是可以直接在浏览器启动的，但是我的不可以的，会遇到无法访问网站的问题。

后来我又找了一下，是还需要配置第二步的。

2.找到 vue.config.json 文件，没有这个文件的话要自己创建一个，然后在里面加上如下的代码段

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{  //用于开发环境host: 'localhost',port: 8080,}
})

然后重新启动项目，就可以在浏览器自动打开了。兄弟们，是不是挺简单的。

Vue 项目启动后在浏览器自动打开相关推荐

vue项目启动后设置默认谷歌浏览器打开
1.lz本地用的windows10系统,在系统左下角的搜索框中输入[控制面板],如下图: 2.在控制面板窗口中选择[默认程序],如下图: 3.在默认程序窗口,选择[设置默认程序],如下图: 4.在默认 ...
Vue进阶（幺陆叁）：vue项目启动后自动打开页面并设置默认浏览器
文章目录一.修改默认浏览器二.vue 项目启动自动打开页面三.拓展阅读以windows 系统为例,操作方法如下: 一.修改默认浏览器设置谷歌浏览器为默认浏览器. 1.首先打开"开始 ...
配置vue项目启动后自动打开浏览器，出现网址跳转错误问题：网址为http://0.0.0.0:8080/ 的页面可能存在问题，或者已永久移动到新的网址。
我们在Vue项目package.js文件里配置启动后启动后自动打开浏览器时,也就是加上–open "scripts": {"serve": "vue- ...
Vue项目启动后自动打开浏览器
vue-cli 覆盖webpack配置 vue项目每次启动时都需要复制链接地址打开浏览器,影响到开发效率,下面一行代码配置,解决问题,自动打开浏览器! 项目根目录下新 vue.config.js(和s ...
vue项目启动后自动跳转页面
通常情况下,执行完命令:npm run dev,需要手动打开页面,如果想要启动完让其自动跳转页面该如何设置呢? 找到项目目录下:config/index.js,设置其文件中autoOpenBrowse ...
Vue项目启动后Error: Cannot find module ‘xxx’的解决方法
文章目录 1. 删除 2. 安装依赖 3. 启动项目解决方法 1. 删除删除 node_modules 整个文件夹和 package-lock.json 文件(这个文件不一定有),注意不是 pac ...
vue项目启动后终端显示localhost和ip访问地址
1.package.json文件下"scripts"的"dev"值后新增 --host 0.0.0.0" "dev": " ...
vue设置浏览器自动打开网址为 http://0.0.0.0:8080/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。
2022年6月14日,用脚手架创建了vue2项目,设置当项目运行起来的时候,让浏览器自动打开:"serve": "vue-cli-service serve --open ...
Vue进阶（十六）：Vue 项目启动原理详解
文章目录一.前言二.文件介绍三.拓展阅读一.前言 vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件 ...

Vue 项目启动后在浏览器自动打开

Vue 项目启动后在浏览器自动打开相关推荐

最新文章

热门文章