如何将vue-cli项目跳转到外部html静态文件

最新推荐文章于 2024-03-18 15:09:34 发布
最新推荐文章于 2024-03-18 15:09:34 发布
阅读量878 收藏 3
点赞数
分类专栏： 小白 文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45571565/article/details/120976837
版权

怎么做才能导入呢

我们经常在写大型项目的时候使用框架和脚手架，例如vue-cli，react等等，所以有时候就会面对处理静态文件的问题，我们知道有一些api如window.open等等可以办到，但是总会出一点小问题，我们就来看看怎么做吧。

首先找到我们的static文件夹

请添加图片描述
static顾名思义，就是用来放置静态文件的，图片，css，html等都可以放在这里面，在这里，我把我要跳转的html文件放在static下面了。

直接引入

请添加图片描述

然后就ok啦（又水了一篇）

qq_45571565
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： :1st_place_medal: 金牌赞助商 :2nd_place_medal: 银牌赞助商 :3rd_place_medal: 青铜赞助商 :star: 特征 vue-i18n基本脚手架 使用vue-i18n-loader的单个文件组件中的区域设置消息 区域设置消息丢失和未使用的报告（实验性） 环境变量 :rocket: 入门 如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： cd my-vue-app vue add i18n :hammer: 注入的命令 vue-cli-service i18n:report （实验性） 报告缺少的区域设置消息键和
用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo
智者乐享 行者无疆
01-29 4153
文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo 微信小程序的页面跳转和生命周期函数[一个简单的 vue 页面跳转示例项目地址
vue项目跳转html页面
最新发布
weixin_44042792的博客
03-18 600
1. 把html页面以及相关文件放到public文件夹下（目的和index.html同级）2.在vue项目中正常写跳转事件，只是路径写法需要注意。
vue-cli4打包最强优化（10M变300kb）
热门推荐
田兴的博客
10-15 2万+
一、去除生产环境sourceMap sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间 module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false, } 二、对资源文件进行压缩 需要下载 compression-webpack-plugin cnpm i compression
怎么在VUE3中跳转到外部HTML文件
studenthtml的博客
03-10 1703
怎么在VUE3中跳转到外部HTML文件
vue项目中，把已经写好的html直接放进去，而不经过编译，直接跳转html页面
m0_67841039的博客
09-07 3465
2.如果项目根目录没有public,但是有static文件夹，则同样把/pages/test.html放进 static文件夹里，按照static的绝对路径访问。1.项目根目录里，如果有public文件夹，则直接放进public文件夹里，与index.html 同级开始，按照项目路径访问。
vue嵌套html跳转静态文件
weixin_59787755的博客
11-19 1997
自己遇到的问题记录
vue跳转外链页面以及跳转html页面超简单方法
qq_39123467的博客
11-17 4108
vue跳转外链页面以及跳转html页面超简单方法
vue 3.0使用 iframe 标签引入本地HTML页面，并实现数据交互
hac_kill_you的博客
05-24 7867
最近在做vue的项目时候，需要引入本地html页面，中间遇到了很多问题，费时又费力，因此记录下来，以备不时之需，也给大家提供点资料。
vue跳转静态HTML,Vue-router，在静态切换的世界中翱翔
weixin_39716043的博客
06-04 1728
什么是router首先知道，Vue是适合在SPA(单页应用)开发中使用的，router能够做到类似html5和jQuery中的pjax(局部刷新，无刷新切换路由)的效果，也是Web应用的路由管理系统。router快速上手安装Vue-routernpm install vue-router --save-dev如果配置过vue-cli则不需要主动去安装Vue-router，在安装Vue-cli的时候...
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用electron将vue-cli项目打包成exe的方法
01-21
如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。 首先你可以下载一个demo了解一下。 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install ...
vue-cli项目修改文件热重载失效的解决方法
10-17
今天小编就为大家分享一篇vue-cli项目修改文件热重载失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3-vue-router创建静态路由和动态路由
qq_41387775的博客
08-17 2367
vue-router创建静态路由和动态路由
vue 加载html静态页面_vue-cli3将单页应用转化为多页面应用优化首屏加载速度
weixin_39710003的博客
12-13 625
首先初始化一个vue-cli3的项目：vue create vue-test目录是这样的：1、在src文件夹下创建home和about文件夹，并且在文件夹中添加App.vue、index.js、router.jshome/App.vuehome/index.jshome/router.js2、在about文件夹中创建components文件夹并在里面创建main1.vue、page1.vue、pa...
vue-cli3静态资源static assets项目结构
weixin_34345560的博客
04-18 5323
今天又是纠结的一天...本文又名:vue/cli3中不得不知的webpack配置..如大家所见，我在前文也写过 vue-cli3.0默认项目目录与2.0的相比，更精简:1.移除的配置文件根目录下的，build和config等目录，2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。3.在s...
vue跳转静态HTML,vue.js中利用router进行跳转（子页面刷新404问题）
weixin_39881575的博客
06-04 1481
1. 背景单页面应用的vue.js项目，设置router模式为history。对a标签写href属性进行子页面跳转。本地可以跳转但刷新了页面，在服务器上则显示为404。2. 解决方案首先，说明下vue-router的默认hash模式——使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。但是这种hash很丑，也不符合对URL的使用习惯。所以，需要使用另外一个叫histor...
[实验题目] 创建Vue-CLI项目，通过静态路由，实现一般管理系统的菜单导航功能。如下图所示，点击“学生信息管理”，通过路由，在工作区显示学生卡片列表相关组件（如前面实验所实现内容）；点击“班级信息管理”，通过路由，在工作区显示班级信息管理对应组件（可只简单显示相关文字表示）。 [实验步骤] CSS类 1.创建Vue-cli项目。 2.编写主页面文件index.vue,其中将页面分为左侧菜单、右侧头部及右侧工作区，右侧工作区为router-view。 3.在src/router/index.js中配置路由。 4.创建并编辑工作区所显示内容对应的各个Vue文件。 5.运行并调试程序。
06-06
关于您的问题，我明白您想要实现一个Vue-CLI项目，通过静态路由来实现一般管理系统的菜单导航功能。您想要在左侧菜单中添加“学生信息管理”和“班级信息管理”两个选项，点击“学生信息管理”时，将显示学生卡片...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值