vue 打开html流_在vue项目中添加一个html页面，开启本地服务器

最新推荐文章于 2024-08-17 19:03:49 发布
最新推荐文章于 2024-08-17 19:03:49 发布
阅读量8.6k 收藏
点赞数 1
文章标签： vue 打开html流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39813263/article/details/112012945
版权
本文介绍了在Vue项目中添加独立HTML页面并使用本地服务器打开的方法。首先，将HTML文件放置在`static`目录下，以绕过Vue路由。接着，通过安装和使用`http-server`作为本地服务器，启动并关闭服务器。此外，还提及了Vue项目中添加ESLint、处理页面返回操作、单元测试、引入特殊字体、使用html2canvas生成截图以及设置每个单页面标题的技巧。
摘要由CSDN通过智能技术生成

在vue项目里新增一个不需要登录的页面，那么我只能新增一个html页面了，不经过路由，直接在浏览器输入路径打开，那么就需要用到本地服务器，

1、vue里面的html页面最好放过在public文件夹里面，但是我的vue项目没有public，就只好放在static里面了，这样可以不经过vue的路由

2、然后就是开本地服务器，当然，是基于node的，

1)可以在这里下载 https://nodejs.org，安装完成后可以在控制台输入：node -v 查看版本号

2)下载http-server：在控制台输入 npm install http-server -g

3)开启本地服务器，在控制台输入 http-server 就可以了

4)关闭本地服务器，按快捷键 CTRL-C，当显示 ^Chttp-server stopped 的时候，就是关闭成功了

Entity Framework 的小实例：在项目中添加一个实体类，并做插入操作

Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

如何在VUE项目中添加ESLint

如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

vue项目中利用popstate处理页面返回操作

需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history

最低0.47元/天 解锁文章
weixin_39813263
关注
用vue打开服务端的html文件,详解如何使用Vue2做服务端渲染
weixin_35715490的博客
06-15 745
vue更新到2.0之后，作者就宣告不再对vue-resource更新，并且vue-resource不支持SSR，所以我推荐使用axios,在服务端和客户端可以同时使用。vue2使用了虚拟DOM,因此对浏览器环境和服务端环境要分开渲染,要创建两个对应的入口文件。浏览器入口文件 client-entry.js使用 $mount 直接挂载服务端入口文件 server-entry使用vue的SSR功能直接...
vue中如何访问到html界面
m0_68094390的博客
05-03 3426
【代码】vue中如何访问到html界面。
HTML——Vue框架
最新发布
new2MySQL的博客
08-17 818
今天学习了VUE的基本语法，初步认识了VUE框架
vue中打开html页面
c_qianxia5040的博客
06-17 9783
在vue项目中打开word生成的html文件，首先将html文件放到public下面，如下图 然后找个触发的时机，比如点击某元素，就可以打开html文件，如下图 window.open(`/operationManual.htm`)
在vue项目中如何使用html页面
热门推荐
weixin_44221944的博客
04-28 2万+
如果有需求在vue页面要跳转新链接页页面可以使用原生html页面，下面将讲述从跳转到使用的过程 1、跳转到html页面 <el-button style="background:#04FFFD;border:none;position:absolute;top:2px;right:100px;z-index:2001;font-weight:bold" round> <a target="_blank" :href="hreft">视频监控大屏</a> &lt
vue.js项目html页面,vue.js中如何运行项目？
weixin_33835558的博客
06-04 1094
vue.js中如何运行项目？下面本篇文章给大家介绍一下如何运行vue项目，通过示例代码介绍。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。运行vue.js项目1、下载并安装node，安装过程很简单，一路“下一步”就可以了，安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。2、npm包管理器，是集成在node中的，所以，直接输入 np...
vue组件使用iframe加载本地html页面
weixin_43575792的博客
09-28 4557
需求 最近遇到一个需求，一个现成的页面使用jquery实现的，现在要嵌入到vue里，笔者表示要偷个懒，不想再画时间改成vue形式的,就采用iframe将改html直接渲染到界面上 操作 1.准备好自己的html页面，比如笔者的html文件夹叫做card,入口是index.html,放在根目录的public目录下 2.在你的vue组件页面放入iframe，注意这里路径很重要，因为不仅要在运行的时候正常显示，打包后也需要正常显示 ，所以要使用的路径相当于跟vue项目public目录下的入口文件index.h
vue把html页面文件放哪,怎么把vue项目放在node服务器上？
weixin_39683163的博客
06-08 1792
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。将vue项目部署到node服务器上：一、准备工作1、先去官网注册账号注册登录之后，看到这个界面：2、可以看大支持的语言还是很多的 ，我们选择Node.js,跳转到这个界面：3、下载工具：我们点击I'm ready ...
vue项目导入本地_.vue文件怎么引入本地图片
weixin_39563132的博客
01-13 1959
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640转载文章请注明出处！ 如果只是.vue文件怎么请求api.vue文件怎么请求api1、首先我们安装axios网络请求库...
vue 判断页面加载完成_Vue 项目里戳中你痛点的问题及解决办法(下)
weixin_39906906的博客
11-19 3639
作者：愣锤 https://juejin.im/post/5b174de8f265da6e410e0b4e前言 最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见V查看打包后各文件的体积，帮你快速定位大文件路由懒加载(也叫延迟加载)开启gzip压缩代码详情页返回列表页缓存数据和浏览位置...
VUE页面中加载外部HTML的示例代码
08-29
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue下路由History模式打包后页面空白的解决方法
12-09
因为当用户直接访问一个非根路径（例如 `/history/somepage`），服务器如果没有正确的配置，将无法找到对应的资源，导致页面空白。 在 Vue 项目中切换到 History 模式时，首先需要在 Vue Router 配置中明确指定 `...
vue打开新html,vue的跳转方式（打开新页面）
weixin_39663360的博客
07-10 1165
Ubuntu 14&period;04 编译安装 boost 1&period;58简介 Boostis a set oflibrariesfor theC++programming language that provide support for tasks and s ...JAVASE02-Unit07： 基本IO操作 、 文本数据IO操作基本IO操作 . 文本数...
vue 脚手架启动html,通过脚手架创建Vue项目
weixin_32075843的博客
06-27 342
第一步 准备工作1.下载安装node.js验证是否安装的方法，在命令行输入node -v2.安装vue在命令行输入npm install -g @vue/cli查看vue版本号 npm vue --version如果vue版本太低，先卸载vue低版本 npm uninstall vue-cli -g第二步 创建vue项目1. 打开要创建路径2-1.vue cli3版本输入vue create ...
vue 打开html流_vue 动态插入渲染html
weixin_35711352的博客
12-29 301
old wordimport Vuefrom "vue";exportdefault{name:"HelloWorld",data() {var check = (rule, value, callback) =>{this.change();};return{form: {newHtml:'',newTemplate: `1`},rule: {newTemplate: [{ validator:...
vue如何打开本地的html文件,Vue本地执行build之后打开dist目录下index.html正常访问...
weixin_32023449的博客
06-29 3717
场景Vue的项目执行npm run build后会在本地dist下生成打包后的文件但是此文件给后端后就能访问，如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。这是因为直接在本地访问打开的话，请求资源的url是如上图file://那种开头的路径，需要的是类似于localhost:8080/这样的在服务器中的访问路径。经过参考别人的博客，有将vue.config.js中的publicPat...
vue中如何带参数打开新的html
zyx的博客
02-07 1万+
在项目中我们会有跳转到指定html页面的需求， 在vue组件中： data(){ return { list:[ { name: 'test1', videoUrl: 'ddd.mp4' } ] } }, methods: { currVideo(data){ window.open("/static/news.html?videoS
vue项目中，把已经写好的html直接放进去，而不经过编译，直接跳转html页面
m0_67841039的博客
09-07 3905
2.如果项目根目录没有public,但是有static文件夹，则同样把/pages/test.html放进 static文件夹里，按照static的绝对路径访问。1.项目根目录里，如果有public文件夹，则直接放进public文件夹里，与index.html 同级开始，按照项目路径访问。
vue写一个静态打开电脑本地应用
09-21
### 回答1： 你可以使用 Vue 的 `template` 和 `methods` 来写一个静态打开电脑本地应用的功能。 在 `template` 中，你可以创建一个按钮或者链接，用于打开本地应用。例如： ```html <template> <div> <button @click="openApp">打开应用</button> </div> </template> ``` 然后，在 `methods` 中，你可以使用 JavaScript 的 `window.open` 方法来打开本地应用。例如： ```javascript methods: { openApp() { window.open('C:\\Program Files\\MyApp\\MyApp.exe'); } } ``` 注意，打开本地应用可能需要用户的授权，因此你可能需要加上相应的安全机制。 ### 回答2： 要实现用Vue写一个静态打开电脑本地应用，需要以下步骤： 1. 首先，创建一个Vue项目。可以使用Vue CLI或手动创建一个Vue项目。 2. 在Vue项目的根目录中，创建一个新的文件夹，命名为"public"。 3. 在"public"文件夹中，创建一个HTML文件，比如"app.html"。在文件中，添加一个按钮或者链接，用于触发打开本地应用的操作。 4. 在Vue项目的根组件中，使用Vue的模板语法，引入"app.html"文件。可以使用`<iframe>`标签或者`<embed>`标签。 5. 在"public"文件夹中，创建一个JavaScript文件，比如"main.js"。在该文件中，写入JavaScript代码，用于监听按钮或链接的点击事件，并执行打开本地应用的操作。 6. 在Vue项目的根组件中，引入"main.js"文件。 7. 在"main.js"文件中，使用JavaScript的`window.open()`方法，指定要打开的本地应用的路径。 8. 运行Vue项目，打开浏览器，点击按钮或链接，即可打开本地应用。 需要注意的是，由于安全性问题，浏览器可能会阻止直接打开本地应用。在某些情况下，需要进行相关设置或配置，允许浏览器打开本地应用。 ### 回答3： Vue是一种用于构建用户界面的JavaScript框架，它通常用于构建单页面应用程序（Single Page Applications）。虽然Vue主要用于构建Web应用程序，但我们也可以使用Vue来创建一个静态打开电脑本地应用。 首先，我们需要使用Vue创建一个新的项目。我们可以使用Vue CLI（命令行界面）来快速创建一个新的Vue项目。在终端中，我们可以运行以下命令来创建一个新的Vue项目： ``` vue create local-app ``` 这将创建一个名为`local-app`的新的Vue项目。 接下来，我们需要配置Vue应用程序的路由。我们可以使用Vue Router库来实现路由功能。在Vue项目的根目录，我们可以使用以下命令来安装Vue Router： ``` npm install vue-router ``` 在Vue项目的`src`文件夹中，我们可以创建一个名为`router`的新文件夹，并在文件夹中创建一个名为`index.js`的新文件。在`index.js`文件中，我们可以定义我们的路由。例如，我们可以创建一个名为`LocalApp`的路由，该路由指向一个名为`LocalApp.vue`的组件。 接下来，我们需要创建一个名为`LocalApp.vue`的组件。这个组件可以包含一个按钮，用于触发打开电脑本地应用的行为。我们可以使用`window.open()`方法来在浏览器窗口中打开本地应用程序。 最后，我们需要在Vue项目的入口文件中导入Vue Router，并将其配置为Vue的插件。我们可以在`main.js`文件中进行这些操作。 完成上述步骤后，我们可以在终端中运行以下命令来启动Vue应用程序： ``` npm run serve ``` 这将启动一个本地开发服务器，并在浏览器中打开Vue应用程序。用户将能够通过点击按钮来打开电脑本地应用。 以上是使用Vue创建一个静态打开电脑本地应用的简要概述。当然，具体的实现细节可能会根据实际应用的需求而有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值