原文链接: 点

如果不能自动打开浏览器,是因为没有安装插件。

插件安装的方法
1.安装插件,在cmd中输入:

$ npm i open-browser-webpack-plugin --save
这里的 i 表示 install ,是缩写。

2.修改build\webpack.dev.conf.js文件。
在顶部声明最下面加入:

var OpenBrowserPlugin = require('open-browser-webpack-plugin')
在plugins中加入:

new OpenBrowserPlugin({ url: 'http://localhost:8080' }),

var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrors = require('friendly-errors-webpack-plugin')
var OpenBrowserPlugin = require('open-browser-webpack-plugin') // add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
}) module.exports = merge(baseWebpackConfig, {
module: {
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// eval-source-map is faster for development
devtool: '#eval-source-map',
plugins: [
new OpenBrowserPlugin({ url: 'http://192.168.10.105:8080' }),
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrors()
]
})

3.最后,在运行npm run dev 即可。

vue无法自动打开浏览器的更多相关文章

  1. Vue方式自动打开浏览器配置

    Vue方式自动打开浏览器配置 1. 通过 package.json 配置项目 // 必须是符合规范的json语法 "vue": { "devServer": { ...

  2. vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!

    vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...

  3. vue 使用 npm run dev命令后 自动打开浏览器

    1.使用vue-cli 老版本构建项目时, 可修改config文件夹下index.js文件 autoOpenBrowser 属性给为 true 即可 使用vue-cli 3.x 版本后,所有的配置项均 ...

  4. vue中npm run dev运行项目自动打开浏览器

    npm run dev运行项目自动打开浏览器设置自动打开浏览器 // 各种设备设置信息      host: 'localhost', //主机名      port: 8080, // 端口号(默认 ...

  5. vue中npm run dev 不能自动打开浏览器运行项目

    最近用vue2.0 + webpack搭建了环境创建新的项目.出现一个很蹩脚的问题: 在终端输入 npm run dev 的时候,不能自动打开浏览器运行项目. 这段话的意思是:你的应用程序运行地址是: ...

  6. webpack之带有可自动打开浏览器及热重载的基本配置

    什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并 ...

  7. vue-cli2.9.1如何自动打开浏览器及实现手机调试

    在vue-cli2.9.1以前我们运行 "npm run dev" 程序会自动打开浏览器进行调试,而且在手机浏览器输入 "IP地址:8080" 能实现在手机端的 ...

  8. autoOpenBrowser: true, 运行npm后自动打开浏览器

    autoOpenBrowser: true, 运行npm后自动打开浏览器

  9. Jupyter Notebook不能自动打开浏览器

    安装了 Winpython,运行Jupyter Notebook.exe或Jupyter lab.exe,总是不能自动打开浏览器,提示"no web browser found" ...

随机推荐

  1. P4015 运输问题【zkw费用流】

    输入输出样例 输入 #1复制 2 3 220 280 170 120 210 77 39 105 150 186 122 输出 #1复制 48500 69140zuixiaofeiyo 说明/提示 1 ...

  2. String 对象-->判断是否相等

    1.定义和用法 == 值相等 === 绝对相等(值和类型都相等) 举例: var str = '8' var str1 = 8 console.log(str == str1) console.log ...

  3. iOS 头条一面 面试题

    1.如何高效的切圆角? 切圆角共有以下三种方案: cornerRadius + masksToBounds:适用于单个视图或视图不在列表上且量级较小的情况,会导致离屏渲染. CAShapeLayer+ ...

  4. PHP远程代码执行漏洞复现(CVE-2019-11043)

    漏洞描述 CVE-2019-11043 是一个远程代码执行漏洞,使用某些特定配置的 Nginx + PHP-FPM 的服务器存在漏洞,可允许攻击者远程执行代码. 向Nginx + PHP-FPM的服务 ...

  5. redis list 基本操作

    写在前面的话 本篇笔记写在笔者刚工作时.如有问题,请指教. 简介 list是链表,redis list的应用场景很多,也是Redis 最重要的数据结构之一,比如微博的关注列表,粉丝列表,消息列表等功能 ...

  6. linux基础知识点扫描

    1.tty:查看自己的虚拟终端 2.echo "你的服务器已经被我控制,请立刻打钱给我,账号12312312312314123421,否则后果自负!!!"  >  /dev/ ...

  7. matlab操作Excel数据

    sheet是Excel的表格,xIRange是表格的列的范围 指定xlRange,例如使用语法'C1:C2',其中C1和C2是定义要读取的区百域的两个度相对的角. 例如,'D2:H4'表示工作表上的两 ...

  8. SQL入门,就这么简单

    随着时代的发展,人类活动产生的信息越来越多,大家常说,现在这个时代是大数据时代.在这样一个前提下,数据的存储成为我们必须要认真对待和研究的问题了.SQL(Structured Query Langua ...

  9. 3. string

    let str = "my string"; 1. str.startsWith('my'); //true2.str.endsWith('my'); //false3.str.i ...

  10. 基于spring的安全管理框架-Spring Security

    什么是spring security? spring security是基于spring的安全框架.它提供全面的安全性解决方案,同时在Web请求级别和调用级别确认和授权.在Spring Framewo ...