admin管理员组

文章数量:1534210

场景：我们在运行vue项目时，希望在执行启动项目命令时，让浏览器自动打开该项目，而不是自己手动在地址栏中输入对应的地址打开此项目

以及配置可根据自己的IP地址访问

第一步： 在package.josn里面 配置scripts中的dev命令

 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

--open: 自动打开浏览器

--port 3000:  指定打开时的端口号

--contentBase src: 打开项目的主页面

--hot: 热更新  给bundle.js文件打补丁，而不是重新生成bundle.js 

以上可实现在启动项目时可自动打开浏览器，访问的地址是：http://localhost:3000/#/

但是如果我想在手机上查看该项目，那么就得访问自己的IP了，但是如果我输入：http://192.168.2.59:3000/#/，发现无法访问，是因为如果没有配置使用自己的IP访问的话，默认访问地址为：http://localhost:3000/#/

所以需要配置以下

"dev": "webpack-dev-server --open --port 8000 --contentBase src --hot --host 192.168.2.59 --inline --progress --config build/webpack.dev.conf.js",

--host 192.168.2.59：这就是配置自己的IP地址

现在执行 npm run dev 时，就可以使用自己的IP地址访问了 

第二种方法：配置webpack.config.js

第一步：增加devServer属性

第二步：引入webpack 

第三步：增加plugins, new 一个热更新的模块对象

//这个配置文件，其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置对象
const path = require("path"); //node.js中的路径
 
const webpack = require('webpack');//引入webpack 
module.exports = {
  //手动指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), //入口，表示要使用webpack打包哪个文件
  output: {
    //输出文件相关的配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件，输出到哪个目录中去
    filename: "bundle.js" //这是指定输出的文件的名称
  },
  devServer: {
    open: true,//自动打开浏览器
    port: 8080,//设置运行端口
    contentBase: "src",//指定托管的根目录
    hot: true//启用热更新
  },
  plugins:[//配置插件的节点
    new webpack.HotModuleReplacementPlugin() //new 一个热更新的模块对象
 
  ]
};

本文标签： 打开浏览器webpackdevServer

版权声明：本文标题：webpack-dev-server如何自动打开浏览器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726871431a1087899.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。