vue-cli4最新版启动项目后自动打开浏览器配置

红太狼 2022-12-06 04:20 238阅读 0赞

**此配置可以有两种方法，具体如下：**

### 1.在package.json中添加–open ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70_pic_center]

### 2.在vue.config.js中添加open:true ###

module.exports = { 
        publicPath: './', // 设置打包后运行路径
        devServer: { 
            host: "localhost", // 设置启动项目网址
            port: 8000, // 设置启动项目端口号
            https: false, // 是否使用https协议
            open: true, // 设置是否自动打开浏览器
            hotOnly: false, // 是否开启热更新
            // proxy:"http://localhost:4000", // 配置一个代理，解决跨域
            proxy: { 
                "/api": { 
                    target: "http://localhost:4000", // 要访问的接口域名
                    changeOrigin: true, // 开启代理，创建一个虚拟服务器进行发送、接收请求
                    pathReWrite: { 
                        "^/api": "" // 使用/api代替目标地址，即重写路径，例如地址是/api/aaa可以写成/aaa
                    }
                }
            }
    
        }
    }

**注意：`vue.config.js`创建项目时不存在，需要自己手动在根目录下创建这个文件  
另外第一种配置的优先级比第二种配置优先级高，所以一旦第一种配置了，第二种在写`open:false`也不会起作用，还是会自动打开浏览器**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/23e33303ee044515bb0e477c59da0f54.png