Vue.js：Vue-cli构建的项目启动服务后自动打开浏览器

最新推荐文章于 2023-03-26 17:25:13 发布

Oruizn

最新推荐文章于 2023-03-26 17:25:13 发布

阅读量1.4k

点赞数 1

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/Oruizn/article/details/113373652

版权

Vue.js 专栏收录该内容

8 篇文章 11 订阅

订阅专栏

0、前言

使用Vue-cli构建的项目是没有配置启动服务后自动打开浏览器功能的，这对于我们开发有时不太方便(需要自己输入前端服务的url)。那我们该如何配置实现启动服务后自动打开浏览器呢？

由于Vue-cli2.0 与 Vue-cli3.0及以上构建出来的项目在结构上有所区别，因此分为两部分介绍实现方法。

1、操作

1.1、Vue-cli2启动服务自动打开浏览器配置

配置文件位置：config–>index.js
在dev块或prod块中添加字段：autoOpenBrowser

dev: {
        env: require('./dev.env'),
        port: 配置端口,
        autoOpenBrowser: true,//设置启动服务后打开浏览器
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        cssSourceMap: false
    }
// 或

prod: {
        env: require('./dev.env'),
        port: 配置端口,
        autoOpenBrowser: true,//设置启动服务后打开浏览器
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        cssSourceMap: false
    }

1.2、Vue-cli3启动服务自动打开浏览器配置

由于Vue-cli3比cli2的集成程度更好，构建时也默认为我们配置好了通用的开发环境。如果需要自定义配置环境，则使用vue.config.js文件来覆盖。因此，关于Vue-cli3的配置有产生了两种方法：若没有新建vue.config.js文件，则使用package.json来配置；如果项目存在vue.config.js文件，除了第一种方法，还可以通过vue.config.js来配置。

1.2.1、package.json配置方法

将package.json文件的scripts块的“serve”属性修改为：vue-cli-service serve --open

在这里插入图片描述

1.2.2、vue.config.js配置方法

将vue.config.js文件的devServer块中添加open: true

devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 允许外部ip访问
        port: 8090, // 端口
        https: false, // 启用https
        open: true, //配置自动启动浏览器
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出