首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让Vue CLI使用热重新加载的外部HTML文件?

Vue CLI是一个基于Vue.js的开发工具,用于快速搭建Vue项目的脚手架。它提供了一套完整的开发环境,包括前端开发、构建、打包等功能。

要让Vue CLI使用热重新加载的外部HTML文件,可以按照以下步骤进行操作:

  1. 在Vue CLI项目的根目录下创建一个新的HTML文件,例如external.html
  2. external.html文件中编写所需的HTML结构和内容。
  3. 在Vue组件中使用<object>标签来引入external.html文件,例如:
代码语言:txt
复制
<object data="./external.html" type="text/html"></object>
  1. 在Vue组件中使用Vue的热重新加载功能,确保在开发过程中对external.html文件的修改能够实时生效。可以通过在vue.config.js文件中配置devServer.watchFiles来实现:
代码语言:txt
复制
module.exports = {
  devServer: {
    watchFiles: ['external.html']
  }
}
  1. 运行npm run serve命令启动开发服务器,Vue CLI会自动监测external.html文件的变化并进行热重新加载。

这样,当你修改external.html文件时,Vue CLI会自动重新加载并更新页面内容,实现热重新加载的效果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可满足各种规模的应用需求。详情请参考腾讯云云服务器
  • 腾讯云对象存储(COS):提供高可靠、低成本的对象存储服务,适用于存储和处理各种类型的文件和数据。详情请参考腾讯云对象存储

请注意,以上答案仅供参考,具体实现方式可能因项目配置和需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

下一代前端构建工具Vite

2.1 如何使用Vite 使用下面的命令即可快速搭建一个使用Vite作为开发服务器项目,使用十分方便,类似于Vue-cli。...三、Vite特性 官方文档介绍,Vite主要有下面三个特性 快速冷启动 及时模块更新 真正按需加载 我们对比 create-vite-app和 Vue-cli创建项目,来看一下Vite快在哪里...,下图分别是使用Vite和 Vue-cli(webpack)启动本地开发服务器过程。...import Vue from 'vue' 4.2 Vite开发服务器如何使用ES Module 我们启动Vite本地开发服务器,用浏览器打开入口页面,观察浏览器NetWork面板.如下图所示, 浏览器加载了入口...浏览器请求更新文件 根据跟新类型处理返回文件 clientjs监听更新消息类型 connected: WebSocket 连接成功 vue-reload: Vue 组件重新加载(当你修改了 script

1.1K10

【webpack】从vue-cli 2x 到 3x 迁移与实践

webpack使用配置区别 3.webpack使用 3.1 vue脚手架中webpack目录结构 image.png 左图项目结构为vue-cli 2x版本脚手架生成项目,build文件夹包含了...webpack配置 右图项目结构为vue-cli 3x版本脚手架生成项目,3x版本并不存在该文件,而是将其配置集成到vue.config.js中 3.2 webpack配置(vue-cli 2x) 3.2.1...entry - webpack 知道使用哪个模块,来作为构建其内部依赖图开始 output - webpack 知道在哪里输出它所创建 bundles,以及如何命名这些文件,默认值为 ....base64 uri webpack 加载程序 html-loader:将 HTML 导出为字符串, 当编译器要求时,将 HTML 最小化 复制代码 plugins - 通过插件引入来处理,用于转换某种类型模块...,来改变其行为,常用配置有: hot - 是否启用 webpack模块替换功能 host - 指定使用一个 host可以外部访问。

1.1K30
  • VUE官方文档讲解

    下载 JavaScript 文件并自行托管。 使用 npm 安装它。 使用官方 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备构建设置 (例如,重载、保存时提示等等)。...通过 Vue School 免费课程学习如何安装和使用 Vue Devtools 在使用 Vue 时,我们推荐在你浏览器上安装 Vue Devtools,它允许你在一个更友好界面中审查和调试 Vue...只需要几分钟时间就可以运行起来并带有重载、保存时 lint 校验,以及生产环境可用构建版本。更多详情可查阅 Vue CLI 文档。...要升级,你应该需要全局重新安装最新版本 @vue/cli: yarn global add @vue/cli # 或 npm install -g @vue/cli 然后在 Vue 项目中运行: vue...如果你将应用程序与带有 target: 'node'  webpack 打包在一起,并正确地将 vue 外部化,则将加载文件

    2K20

    Vue学习笔记2-安装Vue

    使用官方 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备构建设置 (例如,重载、保存时提示等等)。...只需要几分钟时间就可以运行起来并带有重载、保存时 lint 校验,以及生产环境可用构建版本。更多详情可查阅 Vue CLI 文档。...要升级,你应该需要全局重新安装最新版本 @vue/cli: yarn global add @vue/cli # 或 npm install -g @vue/cli 然后在 Vue 项目中运行: vue...如果你将应用程序与带有 target: 'node' webpack 打包在一起,并正确地将 vue 外部化,则将加载文件。...dev/prod 文件是预构建,但是会根据 process.env.NODE_ENV 自动加载相应文件。 运行时 + 编译器 vs.

    1.3K30

    跨年都在更新 vite 到底有多香?

    .png 而对于开发时文件修改后更新 HMR 也存在同样问题; Webpack 更新会以当前修改文件为入口重新 build 打包,所有涉及到依赖也都会被重新加载一次 image-20210105101843520...先来打包问题,vite 只启动一台静态页面的服务器,对文件代码不打包,服务器会根据客户端请求,加载不同模块处理,实现真正按需加载; image-20210104210450199.png 对于更新问题...,vite 采用立即编译当前修改文件,同时 vite 还会使用缓存机制( http缓存 => vite内置缓存 ),加载更新后文件内容 所以,vite 具有了 快速冷启动、按需编译、模块更新 等优良特质...; 综上所述,vite 构建项目与 vue-cli 构建项目主要在于开发模式下,区别还是比较大: 1:Vite 在开发模式下不需要打包可以直接运行,使用是 ES6 模块化加载规则;Vue-CLI...开发模式下必须对项目打包才可以运行; 2:Vite 基于缓存更新,Vue-CLI 基于 Webpack 更新 说了这么多,vite 到底应该怎么用呢?

    3.5K50

    使用 Vue 脚手架,为什么要学 webpack?

    它们是 Vue-cli 2 和 Vue-cli3 创建项目的两个命令,之所以两个命令不同,根本原因是 Vue-cli2 是基于webpack 3,而 vue-cli3 是基于 webpack 4 。...所以我们先介绍 webpack 是如何管理项目的,如何把项目中 js、css、html等是如何压缩转换文件?然后学习 vue-cli 2、vue-cli 3 分别如何创建项目,以及项目结构介绍。...我们都知道,网页渲染时候,加载东西越少,响应也就更快,网页加载速度就能快好多,有时为了优化性能,我们会把资源都合并到一个文件内,导致这个文件会很大,往往会出现两个问题: 当项目庞大时候,不同页面不能做到按需加载...有强大插件系统,可以实现代码压缩、分包、模块替换等,自定义模块等自动化工作。 开发配置快速高效。是前端目前最主流模块化打包工具。...但是开发中不仅仅只有基本 js 代码处理,也需要加载 css、图片、也包括一些高级ES6转ES5、TypeScript 转 ES5、将 scss、less 转 css、将 jsx.vue 文件转js

    91920

    在微前端qiankun中使用Vite你踩坑了吗?

    换句话说我们不再需要构建一个完整 Bundle(下文我们称为:Bundless)。当我们修改文件时,浏览器只需要重新加载单个文件即可。 啊乐同学:那有哪些 Bundless 解决方案 ?...(见下文)Vite就是其一,回顾下Vite优势: 在开发模式下:基于esbuild 预构建依赖(减少HTTP请求) + 浏览器自主加载对应模块,更新页面!...这里我们以vue3+vitedemo为例 会遇到以下两个需要解决问题: 开发模式:在开发环境下,如果我们使用 vite 来构建 vue3 子应用,基于vite构建机制,会在子应 html 入口文件...而我们知道qiankun父应用引入子应用,本质上是将html做为入口文件,并通过import-html-entry这个库去加载子应用所需要资源列表Js、css,然后通过eval直接执行,而基于vite...如果你有更好解决方案,也欢迎评论区留言 2.4 关于ViteDotenv配置 如果你从 vue-cli 切换到Vite 需要注意 Dotenv 命名变化 vite前缀是 VITE_ ,vue-cli

    4.3K21

    用 vite 2 平滑升级 vue 2 + webpack 项目实战

    Webpack 指标对比 经过实际运行,在同一项目中、采用几乎相同设置,结果如下: 指标 \ 工具 Vite Vite(legecy) Vue-cli + Webpack npm run debug...kb) 175 174 88 总 JS 文件体积 (kb) 3864 7832 4080 开发环节区别 webpack: 先转译打包,然后启动 dev server 更新时,把改动过模块相关依赖模块全部编译一次...Module 发出请求特性 直接启动 dev server (不需要打包),对请求模块按需实时编译 更新时,仅浏览器重新请求改动过模块 目前由 webpack 或 vite 做这些架设本地服务...主要涉及文件: /index.html -- 新入口,原有 src/index.html 暂时保留 /vite.config.js -- vite 工具配置文件 vite版本: vite v2.8.2...,应尽量避免 new Set() 如果使用了 Map/Set 等 ES6 类型且没有使用 polyfill,应该注意其行为 比如 Set 值可能在 webpack/babel 转写中会自动变为数组

    1.5K70

    ViteConf 2022回顾:Vite是如何诞生

    vue-cli 不过,这些构建工具对于大多数开发者而言还是太底层了。当越来越多初学者尝试使用这些构建工具时,其实他们对于学习如何配置打包并不感兴趣,而是习惯于有一个入口来快速启动。...@vue/dev-server 于是,在2019年,尤雨溪创建了 @vue/dev-server,它能够进行转化,并且使用原生 ESM import 语法来加载 Vue SFC 组件。...然而,这存在两个问题: 如何处理 npm 依赖; 如何在原生 ESM 中进行更新。 由于他一直忙于 Vue 3 开发工作,就没有持续跟进这两个问题。...所以,在 Vue 生态中,提供了一个静态站点生成器:VitePress,它是一个基于 Vite 高级别应用。它允许通过路由去编写 HTML 文件,并且可以在其中引入 Vue 组件。...vue-cli,目的是每一个框架都能使用; 为框架作者提供一个共享工具层。

    63720

    Vite 特性和部分源码解析

    按需加载 为了减少 bundle 大小,一般会想要按需加载,主要有两种方式: 使用动态引入 import() 方式异步加载模块,被引入模块依然需要提前编译打包; 使用 tree shaking 等方式尽力去掉未引用模块...; 而 Vite 方式更为直接,它只在某个模块被 import 时候动态加载它,实现了真正按需加载,减少了加载文件体积,缩短了时长; Vite 开发环境主体流程 下图是 Vite 在开发环境运行时加载文件主体流程...server 核心方法 从入口文件 cli.ts,可以看到三个命令对应了 3 个核心文件&方法; dev 命令 文件路径:....文件更新时,将会触发页面的重新加载。...总结 使用 Vite 进行本地服务启动和更新都会有明显提效,至于编译打包环节差异点有哪些?效果如何?你们还踩过哪些坑?留言告诉我吧。

    78870

    Migrate From Vue-cli to Vite

    un vue/cli-plugin-babel vue/cli-plugin-eslint vue/cli-plugin-unit-jest 如果你使用Vue2,我们还要补充vite-plugin-vue2.../#config-file '@'别名 如果你在webpack中使用了别名导入文件,则现在你需要重新创建它: import { defineConfig } from 'vite' import { createVuePlugin...image.png 比如 .env.local 文件一个变量: VITE_APP_BACKEND_URL=http://localhost:3001 测试用例 现在我们不能再使用 vue-cli-service...用 vue-cli/webpack启动:大约30秒(随着我们向项目中添加更多文件,它将不断增加?) 更新 vite: 简单更改(HTML标记,CSS类...):立刻生效。...复杂更改(重新命名JS函数,添加组件…) :不确定,有时候我更喜欢自己刷新。 vue-cli/webpack: 简单更改:〜4sec更复杂更改:我从不等待,而是手动刷新页面。

    5.2K30

    构建Vue.js组件10个技巧

    与Webpack结合使用时,只有在使用组件时才去延迟加载组件。这使您初始应用程序文件大小更小,并减少了初始加载时间。 ? 2. 延迟加载/异步组件 使用Webpack动态导入延迟加载组件。...Vue-CLI力量 Vue CLI 是一个功能强大命令行界面,允许开发人员快速利用大量可以加快工作流程功能。 一个我使用很多功能是,运行 vue serve,后边跟上一个Vue组件路径。...这样做好处在于,您可以完全开发一个独立组件,同时也可以对组件进行重新加载和迭代,无需临时将新组件导入页面进行开发。 ? 在团队工作时,您可能需要提取一个特定组件并与其他组人共享。...这就引出了 Vue CLI 下一个功能:将Vue组件导出为库能力。...调用时,Vue将自动构建单个文件组件,将CSS移动到外部CSS文件(可选,您也可以内联),以及创建 UMD 和 Common .js文件以导入到其他JS项目中。 ?

    2.1K10

    webpack面试题

    、提取首屏不需要执行部分代码其异步加载 模块合并:在采用模块化项目有很多模块和文件,需要构建功能把模块分类合并成一个文件 自动刷新:监听本地源代码变化,自动构建,刷新浏览器 代码校验:在代码被提交到仓库前需要检测代码是否符合规范...然后定义这些执行顺序,来glup执行这些task,从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起,也不能构建不同模块之间依赖关系。 如何自动生成webpack配置文件?...webpack-clivue-cli 什么是模更新?有什么优点? 模块更新是webpack一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新。...在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版自动刷新浏览器。 优点:只更新变更内容,以节省宝贵开发时间。...调整样式更加快速,几乎相当于在浏览器中更改样式 webpack-dev-server 和 http服务器区别 webpack-dev-server使用内存来存储webpack开发环境下打包文件,并且可以使用模块更新

    59931

    前端构建效率优化之路

    项目整体是基于 Vue + TypeScirpt,而构建工具,由于最早项目是经由 vue-cli 初始化而来,所以自然而然使用是 Webpack。...而 Webpack 更新机制主要耗时点在于,Webpack 更新会以当前修改文件为入口重新 build 打包,所有涉及到依赖也都会被重新加载一次。...在些事件分别是: connected: WebSocket 连接成功 vue-reload: Vue 组件重新加载(当修改了 script 里内容时) vue-rerender: Vue 组件重新渲染...基于 Vue-cli 4 Vue2 项目改造,大致只需要: 安装 Vite 配置 index.html(Vite 解析 <script type="module" src="......<em>Vue</em>,在<em>文件</em><em>的</em>处理上就需要多过一层 <em>vue</em>-loader; 他们<em>的</em>项目采用了微前端,对项目对了拆分,主项目只需要<em>加载</em>基座相关<em>的</em>代码,子应用各自构建。

    1.1K20

    前端-手摸手,带你用合理姿势使用 webpack 4(上)

    比如如何处理 css 文件如何配置 webpack-dev-server,讲述 file-loader 和 url-loader 之间区别等等,有需求推荐看 官方文档 或者 survivejs 出一个系列教程...vue 的话由于新版 vue cli不支持 eject了,而且改用 webpack-chain来配置,所以借鉴起来可能会不太方便,主要配置 地址。...vue-cli正好也有这个相关 issue,尤雨溪也在不使用 @next版本基础上 hack 了它,有兴趣可以自己研究一下,本人在项目中直接使用了 @next版本,也没遇到其它什么问题(除了不兼容...其它 html-webpack-plugin 配置和之前使用没有什么区别。...使用新版 UglifyJsPlugin时候记住可以加上 cache:true、 parall:true,可以提搞代码打包压缩速度。更多配置可以参考 文档 或者 vue-cli 配置。

    1.2K50

    实战总结 Vue 学习看这一篇就够了

    : .jpg .png .gif .bmp .svg 字体文件(Fonts): .svg .ttf .eof .woff .woff2 模板文件: .ejs .jade .vue ▐ 2.3 部署...,找一个叫做 package.json 包配置文件 在 package.json 文件中,查找一个 main 属性[ main 属性指定了这个包在被加载时候入口文件] 改了 webpake 包就需要重新运行项目...Vue 安装 Vue 包 由于在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以需要安装 能解析这种文件 loader 在 main.js 中,导入 vue 模块 import...插件介绍和使用 ▐ 4.1 postcss-plugin-px2rem 配置文件名 postcss.config.js vue-cli3.x 脚手架自带 px 转 rem 等单位配置,建立脚手架时候选择分离.../src/index.html') filename:'index.html' }) //这个节点,用于配置 所有 第三方模块 加载器 module:{ rules:[ {test:/\.

    1.7K31

    进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇)

    vue-cli创建框架   •分析原型项目配置   •多页面化改造 正文 1.利用vue-cli搭建基本框架                      vue-cli是官方提供脚手架工具,...•path指的是打包后输出文件目录   •publicPath指的是path中生成文件,对应外网访问地址,需要根据最终发布后项目实际如何部署来填写,开发和生产两个环境可能不一样路径。...再看看module,这里从2.x开始就改了格式,一目了然,就是各种文件应该使用什么loader去加载处理。...环境变量设置,使用是cross-env工具,在npm脚本中运行设置cross-env NODE_ENV=production >App.vue和index.html 这两个就是很基本vue功能了...需要关注是,现在只有一个index.html,而且index.html功能比较单一纯粹引入js。做多页面时,html如何复用,是需要考虑问题。

    44510

    正确Webpack配置姿势,快速启动各式框架!

    一般来说,在Angular中我们将是启动.bootstrap()文件,在Vue中则是new Vue()位置,在React中则是ReactDOM.render()或者是React.render()启动文件...HtmlwebpackPlugin 功能有下: 为html文件中引入外部资源如script、link动态添加每次compile后hash,防止引用缓存外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个...Express服务器,主要提供两个功能: 为静态文件提供服务 自动刷新和替换(HMR) 在实际开发中,webpack-dev-server可以实现以下需求: 每次修改代码后,webpack可以自动重新打包...默认是localhost devServer.hot: 启用webpack模块替换特性 devServer.progress(CLI): 将运行进度输出到控制台。 其余配置请移步官方文档。...本骚年是用vue-cli,所以这里没有Vue相关代码。

    1.5K30

    vue 知识总结

    Vue 核心思想&全家桶 组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端未来发展方向,释放了对DOM操作,DOM随着数据变化自然而然变化,...是快速构建单页应用脚手架 vue-cli 大大降低了webpack 使用难度,支持更新,有webpack-dev-server支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发...更新:是检测文件变化并用websocket通知客户端做出相应更新(webpack里配置) //安装vue-cli npm install -g vue-cli //利用脚手架初始化项目 vue...像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后文件将会异常大,造成进入首页时,需要加载内容过多,时间过长,会出啊先长时间白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分...,这时候就要用 is 代替一下, html 语法符合规则验证。

    1.3K80

    vue-cli脚手架 快速搭建vue项目环境

    幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 安装命令 npm install -g vue-clivue-cli命令,快速搭建一个webpack项目: vue init...入口文件: ? 需要注意是,我们看到有一类后缀名为.vue文件,我们称为单文件组件 ? 每一个.vue文件,就是一个独立vue组件。...脚本有三个: dev:使用了webpack-dev-server命令,开发时部署使用 start:使用了npm run dev命令,与上面的dev效果完全一样 build:等同于webpack打包功能...我们执行npm run dev 或者 npm start 都可以启动项目: 而单文件组件中包含三部分内容: template:模板,支持html语法高亮和提示 script:js脚本,这里编写就是vue...运行时依赖只有vuevue-router 脚本有三个: dev:使用了webpack-dev-server命令,开发时部署使用 start:使用了npm run dev命令,与上面的dev效果完全一样

    53930
    领券