使用webpack打包vue项目,无法自动在浏览器中打开,情况总结

最新推荐文章于 2024-04-27 08:39:59 发布
最新推荐文章于 2024-04-27 08:39:59 发布
阅读量3.3k 收藏 2
点赞数 2
文章标签： vue 前端 vue-cil 浏览器打动打开
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39417767/article/details/80927142
版权

最近用vue-cil快速构建vue项目的时候,发现他默认的是无法在浏览器的窗口中打开的,很不方便.

当你运行 npm run dev 的时候窗口会显示

I  Your application is running here: http://localhost:8080

这段话的意思是：你的程序运行地址是:http://localhost:8080

于是总结了一下浏览器默认打开的设置方法.

其实归根结底就是一个属性,autoOpenBrowser//是否在浏览器中打开.默认是false,改为true即可

找到config/index.js

改成


或者!!!!

在build文件夹中webpack.dev.conf.js中改动



这时候你只需要加一个 ! 就可以了,因为默认的是false,添加 ! 之后就变为了true.


这两种亲测都可以,大家选择方便的用吧~



Just-MenHee
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue webpack 自动打开页面_vue+webpack踩坑实录（不定期更新）
weixin_39622150的博客
12-18 192
vue-cli2.9.1如何自动打开浏览器及实现手机调试在vue-cli2.9.1以前我们运行 “npm run dev” 程序会自动打开浏览器进行调试，而且在手机浏览器输入 “IP地址:8080” 能实现在手机端的调试，可是升级到vue-cli2.9.1后一切都不一样了，浏览器需要手动输入网址调试，手机端输入 “IP地址:8080” 已经不能打开页面了。有没有顿时感觉整个开发过程都不爽了，总是觉...
让webpack+vue-cil项目不再自动打开浏览器的方法
01-19
比如，当我们输入npm run dev开始跑起项目之后，就会自动的打开浏览器，并把页面打开。 按理说，这是一个很方便的配置。问题是，我们在调试的过程中，可能需要不断的重启项目。每一次重启，就会开一个网页，让我非常...
vue项目打包后，html文件无法在浏览器运行
Java_Fly1的博客
07-08 864
npm run build 打包好后，直接打开，出现如下问题： 在build文件夹下的webpack.prod.conf.js添加以下代码 publicPath: ‘./’, 'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require
【Vue】如何使用Webpack实现打包操作
最新发布
qq_51933234的博客
04-27 999
其实，我觉得这个webpack打包更有意思的，把我们的源文件进行压缩后，可以直接调用或者运行。我之前玩过一段时间的小程序，当时有个人给了我一个程序代码就是打包过后的（当时自己还不知道打包这个东东），这个程序可以用小程序直接运行，但是那么代码就看不懂，让自己困惑了好一段时间。当然现在自己学的比较多，之前不同的地方来慢慢清晰了起来。为什么要说这个事呢？其实是希望在屏幕前看这篇博客的小伙伴能够不忘初心，砥砺前行。那些让你现在迷惑的，搞不懂的，终有一天，你会把所有的细节，所以的内部把内容都搞明白的！加油！各位！
解决Vue3项目打包后dist中的index.htm无法用浏览器直接打开
普通人一枚
12-09 2530
创建一个服务器来访问资源（最简单了，不过要有环境，普通电脑还是不行，其他方式参考其他帖子）：可以打开浏览器在localhost:8080中查看了，访问成功！
npm 运行vue-cli webpack 项目，npm显示应用显示已经运行，但是网页没有自动打开问题
weixin_38527697的博客
08-20 438
npm上显示：Your application is running here: http://localhost:8080 ，但是网页没有自动打开 解决方案： 打开项目文件，寻找config=>index.js 打开 在index.js中有个autoOpenBrowser,其值默认是false,把它设置为true 重启项目测试一下 ...
webpack打包后自动弹出浏览器查看效果
qq_40666120的博客
05-15 841
当配置了webpack自动打包和预览页面后，每次打包都要复制 http://localhost:8080/ 到浏览器中查看效果，那么我们能不能在打包后自动打开浏览器查看效果呢，答案是可以的。 在package.json中的配置 注意：当我们端口被占用了就另外更换一个端口 package.js代码如下： "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-d
使用webpack打包后的vue项目如何正确运行（express）
10-17
在现代前端开发中，Webpack 是一个非常重要的模块打包工具，它可以将 Vue.js 项目中的各种资源文件（如 JavaScript、CSS、图片等）进行编译、优化，并打包成可部署的静态资源。Vue 项目经过 Webpack 打包后，通常会...
解决在vue项目中webpack打包后字体不生效的问题
10-18
例如，"微软雅黑"在CSS中被写为`font-family: "微软雅黑"`，在打包后可能会被错误地解析为包含反斜杠的Unicode编码，如`font-family: '微软雅黑' /* \5FAE\8F6F\96C5\9ED1 */`，这会导致浏览器无法正确识别字体，...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下...
vue webpack文件打包后的文件如何本地运行
xiaoshengjinbu的博客
02-24 2357
1、安装express-generator npmi express-generator -g 2、创建一个express项目 expressmy-express-project 3、进入项目目录 cdmy-express-project 这时候能看到my-express-project文件夹下的内容是这样的 4、安装相关项目依赖 npm install 然后把刚刚打包后的dist文...
vue+axios+webpack构建的项目打包后IE11中数据更新后页面没有刷新问题
lyn1772671980的博客
08-28 1173
【问题描述】页面进行删除数据操作后，重新获取列表，实际操作成功，ie11中列表不刷新，删除的数据依旧在 【问题分析】F12打开IE11的控制面板，查看请求‘已接收’后的数据来源，显示“来自缓存”，如下图，ie浏览器会对相同请求的ajax,进行缓存,当你删除数据后,在调用同样的接口,ie不会刷新,只会把第一次请求该接口的数据缓存拿出来，所以页面数据依旧在，视图不更新 【解决办法】给请求加上时...
聊聊如何让浏览器能运行webpack
zjscy666的博客
11-27 1108
缘起 一直在纠结要不要发这个文章，因为现在这个方案除了少数需要线上IDE的公司能用到，大部分公司其实不值得花费大量人力物力去搞这个，因为我一直认为技术是更好的为公司业务做服务的，发的文章最好是大家能用的上的！ 为啥我最后还是决定发这个文章呢，因为小编每次写文章前都会进行摇号，最终摇上了这个文章，所以按照规则发一发吧！ 题目解析 我们知道webpack其实很大程度上利用了node的能力，那么这个标题其实可以转化为如何让浏览器拥有node的能力。去年的时候，因为公司业务的关系，我做过类似测试，发现node的
webpack之带有可自动打开浏览器及热重载的基本配置
weixin_34029680的博客
07-10 718
什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么要使用WebPack 1、模块化，让我们可以把复杂的程序细化为小的文件; 2、类似于TypeScript这种在JavaScript基础上拓展的开发语言：...
vue webpack 自动打开页面_webpack+vue2.0项目 （二）热加载，vue-router
weixin_36051633的博客
01-11 118
目录创建好之后，命令行输入npm run dev因为在配置文件config/index.js里：dev: {env: require('./dev.env'),port:8080,autoOpenBrowser:true,assetsSubDirectory:'static',assetsPublicPath:'/',proxyTable: {},//CSS Sourcemaps off by d...
i your application is running here: http://localhost:8080
m0_53553562的博客
05-07 2421
Vue 中 npm run dev 运行 报错 i your application is running here: http://localhost:8080 解决方法： 将autoOpenBrowser:false ;改为true
Vue 项目启动后在浏览器自动打开
前端小白的博客
08-12 6333
Vue 项目启动浏览器自动打开，项目启动遇到无法访问此网址
vue项目build打包后，静态和服务器访问效果出不来，icon图标无法加载？过来我教你
Mgf_Yzy的博客
08-28 1615
今天遇到一个令人很头疼的问题，vue项目build之后，静态资源和服务器端访问空白，啥效果都没有，最后无奈只好查百度，找方法，正当我放弃的时候，突然找到了救心丸 来，直接上图 好不容易打包好的文件，结果给我报一堆错，难怪页面出不来 当页面出不来时，可能是你的路径不对 查原因是因为绝对路径的原因：你的config文件夹中的index.js文件，里面的build代码块路径是这样的 这里的assetsPublicPath路径是根路径，静态资源当然是访问不到的，修改后是这样的，及那个绝对路径改为相对路径就好了
vue-cli打包之后的dist文件无法运行index.html
za_az的博客
03-29 5750
vue版本 "vue": "^2.5.2","webpack": "^3.6.0", 问题 打包之后的 dist 文件下面包含 static 文件和 index.html 文件，直接打开index.html文件为空白，控制台会有很多错误 解决方法 build/util.js if (options.extract) { return ExtractTextP...
使用webpack打包vue项目
09-13
要使用 webpack 打包 Vue 项目，你需要按照以下步骤进行操作： 1. 首先，确保你的项目目录中已经安装了 Node.js 和 npm（或者 yarn）。 2. 在项目目录下创建一个新的 `package.json` 文件，可以通过运行 `npm init` 命令来生成该文件。 3. 在 `package.json` 文件中添加以下依赖项： ```json { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "webpack": "^4.44.2", "webpack-cli": "^3.3.12", "vue-loader": "^15.9.6", "vue-template-compiler": "^2.6.11" } } ``` 这些依赖项包括 Vue.js、Webpack、Webpack CLI、Vue Loader 和 Vue Template Compiler。 4. 运行 `npm install`（或者 `yarn install`）命令来安装这些依赖项。 5. 在项目目录下创建一个 `webpack.config.js` 文件，并添加以下配置： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] } }; ``` 这个配置文件定义了入口文件、输出目录、使用的 loader 和解析规则等。 6. 在项目目录下创建一个 `src` 文件夹，并在其中创建一个 `main.js` 文件作为入口文件。 ```javascript import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); ``` 在 `main.js` 中，我们导入 Vue 和根组件 App，并通过创建一个 Vue 实例将 App 渲染到 `#app` 元素中。 7. 创建一个 `App.vue` 文件，作为根组件的模板。 ```vue <template> <div id="app"> <h1>Hello, Vue!</h1> </div> </template> <script> export default { name: 'App' } </script> <style> h1 { color: blue; } </style> ``` 8. 现在，可以运行 `npx webpack`（或者通过在 `package.json` 中配置脚本来运行）来构建你的项目。构建完成后，在 `dist` 文件夹中会生成一个名为 `bundle.js` 的文件。 9. 最后，将 `bundle.js` 引入你的 HTML 文件中，并在浏览器中打开该文件，你应该能够看到显示 "Hello, Vue!" 的页面。 以上就是使用 webpack 打包 Vue 项目的基本步骤。可以根据你的具体需求进行更多的配置，如代码分割、CSS 预处理等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值