webpack配置vue

最新推荐文章于 2025-12-21 21:04:38 发布
原创 最新推荐文章于 2025-12-21 21:04:38 发布 · 144 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #vue

本文介绍了如何在webpack项目中配置Vue，包括Vue的三种安装方式：直接下载、CDN引用和npm安装。在详细讲解npm安装过程后，讨论了Vue在构建时的runtime-only和runtime-compiler两种版本的区别，并解决了因使用runtime-only导致的模板编译问题。通过修改配置，成功实现了Vue组件在页面上的正确显示。

接上一篇文章，这篇文章我们来学习 webpack配置vue
复制项目 03-webpack的loader 重命名为
04-webpack配置vue
<中间少了一部分学习 webpack依赖less文件 的学习，不影响下面的学习>
安装vue的三种方式
1.直接下载引用
2.CDN引用
3.npm安装
执行命令 npm install vue --save （因为我们运行时候，也是需要依赖vue的，所以只要–save而不需要–save-dev）
就安装好了vue
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以在node_modules中 找到Vue的依赖包
在这里插入图片描述
好了，上面我们安装好了！
接下来我们 来学习怎么 用 这个 安装好 的 VUE

下面我们在 main.js 里面写 使用vue的代码
在这里插入图片描述
在html文件 写一个文本块 这样我们的 vue代码就 挂在到vue实例 上去了
在这里插入图片描述
再重新打包 npm run build

在看html页面
在这里插入图片描述
看到我们的message没起作用
并且报了错误

这是因为 vue在最终发布的时候 它构建了两类版本

  1. runtime-only
  2. runtime-compiler
    当我们使用runtime-only时，代码中不可以有任何template，
    我们现在是没有template，但是vue会把我们vue实例挂载的div当做template
    在这里插入图片描述
    而runtime-compiler这种可以有template，因为有compiler可以用于编译template
    在这里插入图片描述

那这个问题怎么解决呢？？？

在这里插入图片描述
在执行npm run build 重新打包
访问html页面
可以看到我们写的message正常显示出来了
在这里插入图片描述

手动使用webpack配置vue3开发环境
qq_42294411的博客
05-07 1052
手动使用webpack配置vue3开发环境。
精选资源
04-webpack配置vue.rar
05-06
在 Vue 项目中配置 Webpack 可以实现更高效、灵活的构建流程。 Vue 组件化的基本概念： 1. **组件（Component）**：组件是 Vue.js 的核心，它可以看作是一个独立的、可复用的 Vue 实例。每个组件都有自己的视图和...
webpack配置VUE
qq_57611356的博客
06-16 199
runtime-only/compiler版本 vue构建了两类版本：区别在于打包中的main.js文件 runtime-compiler:代码中，可以有template，compiler会编译template template->ast->render->vdom->UI new Vue({ el:'#app', template:<App/>, //使用 components:{App}}) //注册 runtime-...
webpack中配置vue
ICanWin_lll的博客
01-23 1520
一.下载使用vue 注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖 在main.js中引用vue 重新打包，运行程序，报错: 这个错误说的是我们使用的是runtime-only版本的Vue,应该使用runtime-compiler 所以我们修改webpack的配置，添加如下内容即可： 二.el和template区别 el:el用于指定Vue要管理的DOM，与index.html 中的 #app 进行绑定，让Vue实例之后可以管理它其中的内容，...
使用webpack配置vue项目
weixin_70989429的博客
07-14 896
使用webpack自己尝试搭建vue-cli
webpack配置vue3项目
qq_53663696的博客
04-29 4117
用webpack搭建Vue3项目一、项目需要的基本依赖1.vue的依赖2.ui组件库依赖3.AJAX请求库依赖（axios）二、几个loader和webpack配置1.引入库2.目录结构三、main.js入口文件与index.html1.main.js2.index.html*四、webpack配置文件五、路由文件总结 声明：本文章采用node的包管理工具和webpack。 一、项目需要的基本依赖 1.vue的依赖 声明一点，自从22年3月依赖vue的默认版本就变成了3.x所有后面需要@指定版本。 n
Webpack配置Vue热更新
izwmain的博客
11-29 1804
Webpack配置Vue热更新 需要的包 cnpm i vue webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin style-loader css-loader vue-loader -D npm i vue webpack webpack-cli webpack-dev-server ...
webpack开发Vue配置
qq_33235582的博客
12-03 4774
在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。 webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载组成，它的html结构可能会非常简单，比如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta
webpack配置vue（由浅入深，循序渐进）
407指导员
12-28 2073
webpack配置vue npm时加上-dev,是开发时依赖，运行时依赖就直接–save不加-dev. npm install vue@2.5.21 --save –save可以简写-S,一个横杠加大写S 然后在mian.js里引入 //使用vue进行开发 import Vue from 'vue' const app = new Vue({ el: '#app', data: { message: 'hello webpack' } }); 然后执行npm run buil
vue入门——webpack配置
魔鬼的归宿
03-19 7360
从零开始搭建Vue 2 环境
WebPack配置vue多页面的技巧
12-09
一个项目前台页面写差不多了，webpack几乎零配置，也算work起来了。现在需要编写后台管理界面，另起一个单独的项目，那是不存在的。于是网上了搜了大把大把的文章，很多都是修改了项目的结构，讨厌，vue-cli搞的那...
Vue+Djiango基础用法
weixin_65838109的博客
12-17 167
v-if实现页面元素显示和消失会直接销毁或显现该元素，而v-show实现页面元素的显示和消失会使用display实现，而不会销毁该元素。安装vue所需各种资源node.js、npm/cnpm、webpack、vuecli。创建vue2项目：vue create 项目名。运行vue2项目：npm run serve。运行vue3项目：npm run dev。
现代webpack/react/typescript/pnpm项目模板，从零到一搭建webpack项目
qq_38977714的博客
12-16 929
如果急用，直接使用当前模板即可。点击右上角Use This Template即可创建一个新的项目。
前端工程化
2301_76481170的博客
12-16 231
语言增强：大量的 语法 通过工具去转染 比如说 vue 中的模板 reaxt 连的jsx,babel。api兼容：填充API core.js， promise observer。标准 commonJS AMD CMD UMD ESM。监听 被监听的对象 和代理之间的关联 webpack弱引用。协议 ： http websocket 第二个。框架 == 》 视图和数据的关联。npm 包的属性 cli等。创建视图的过程和视图关联。语法兼容: 大量工具转换。目标 -- >> 实现。
2025/12/18 学习总结
lxh0113的博客
12-19 317
在 webpack 命令行 环境配置的 --env 参数，可以运行传入任意数量得环境变量，在webpack 中，要使用 env 变量，必须将 module.exports 转换成一个函数 （可以理解为，这样才能把环境变量等参数传递进来）在启动 webpack 时，我们经常可以注意到 有 websocket 字眼，这是因为，webpack-dev-server 会在包中引入一个脚本，此脚本链接到 websocket 这样可以在任何文件修改时，触发重新加载应用程序。而非在配置中指定的原因。
【Webpack 的核心应用场景】
demotang的博客
12-18 350
Webpack 是一个模块打包工具，适用于单页应用、多页应用、静态资源处理等场景。核心功能包括通过 loader 转换非 JS 资源，使用插件优化开发和生产环境，支持微前端架构和 SSR。可通过编写自定义 loader 和 plugin 扩展功能，配合性能调优手段如缓存和多线程构建提升效率。Webpack 提供从基础到高级的完整解决方案，适合各类现代前端项目开发。
Webpack和Vite优化的区别
最新发布
2301_79982845的博客
12-21 585
特性Webpack 核心逻辑Vite 核心逻辑核心思想打包所有模块为 bundle，兼容所有场景利用原生 ESM 按需编译，优先现代浏览器性能瓶颈全量解析/编译，JS 工具链效率低仅不兼容老旧浏览器，生态稍弱优化核心缓存、拆分、多进程、预编译原生 ESM、esbuild 预构建、Rollup 打包适用场景复杂项目（多页、跨端、兼容老旧浏览器）现代前端项目（Vue/React 单页，追求开发效率）
Webpack5优化的“双引擎”
AI_5678的博客
12-17 325
本文介绍了Webpack性能优化的核心策略：代码分割和TreeShaking。通过SplitChunksPlugin提取公共代码，动态导入实现按需加载，避免过度分割导致请求过多。TreeShaking依赖ES6模块，需在生产模式下开启，注意处理副作用文件。两者结合可显著减小打包体积，提升加载速度。最后总结了常见优化误区，如正确配置splitChunks.chunks、保留ES模块结构、使用魔法注释命名动态导入文件等。这些方法可有效解决打包体积过大、重复加载等问题，实现更优的前端性能。
webpack4迁移webpack5记录
qq_41549657的博客
12-19 270
webpack4 到 webpack5 的迁移核心在于依赖版本升级与配置适配，需重点关注废弃配置的替换、Node.js 模块 polyfill 处理及插件兼容性。对于长期使用 webpack4 的项目，迁移后可显著降低维护成本、提升构建效率，同时接入 webpack5 专属特性（如模块联邦实现跨应用资源共享）。webpack5 作为官方迭代的重要版本，相比 webpack4 带来了多项核心优化，包括但不限于：​。webpack5 对配置结构进行了优化，部分配置项被废弃或调整，需按以下规则修改配置文件：​。
webpack配置vue3
03-14
### 使用 Webpack 配置 Vue3 项目的指南 #### 创建项目结构 为了配置好 Webpack 的 Vue3 项目，创建如下所示的项目结构[^1]: ```plaintext vue3-webpack/ ├── src/ │ ├── main.js │ ├── App.vue │ └─...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值