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

最新推荐文章于 2024-03-18 15:09:34 发布
最新推荐文章于 2024-03-18 15:09:34 发布
阅读量896 收藏 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跳转静态HTML,Vue-router，在静态切换的世界中翱翔
weixin_39716043的博客
06-04 1792
什么是router首先知道，Vue是适合在SPA(单页应用)开发中使用的，router能够做到类似html5和jQuery中的pjax(局部刷新，无刷新切换路由)的效果，也是Web应用的路由管理系统。router快速上手安装Vue-routernpm install vue-router --save-dev如果配置过vue-cli则不需要主动去安装Vue-router，在安装Vue-cli的时候...
vue跳转静态HTML,vue.js中利用router进行跳转（子页面刷新404问题）
weixin_39881575的博客
06-04 1529
1. 背景单页面应用的vue.js项目，设置router模式为history。对a标签写href属性进行子页面跳转。本地可以跳转但刷新了页面，在服务器上则显示为404。2. 解决方案首先，说明下vue-router的默认hash模式——使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。但是这种hash很丑，也不符合对URL的使用习惯。所以，需要使用另外一个叫histor...
vue嵌套html跳转静态文件
weixin_59787755的博客
11-19 2054
自己遇到的问题记录
vue跳转到html文件
那一刻的博客
11-09 2359
把.hmtl放到static文件夹目录下 通过location.href跳转
vue项目中，把已经写好的html直接放进去，而不经过编译，直接跳转html页面
m0_67841039的博客
09-07 3754
2.如果项目根目录没有public,但是有static文件夹，则同样把/pages/test.html放进 static文件夹里，按照static的绝对路径访问。1.项目根目录里，如果有public文件夹，则直接放进public文件夹里，与index.html 同级开始，按照项目路径访问。
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
总的来说，vue-cli帮助开发者快速搭建了一个具备基础功能的VueWebpack项目，包括模块化构建、热加载开发环境、路由管理、静态资源处理等。随着项目的深入，还可以自定义webpack配置，添加本地mock数据支持，以满足更...
详解如何将 Vue-cli 改造成支持多页面的 history 模式
08-28
然而，当项目需求扩展到多页面应用时，Vue-cli的默认配置并不完全适用。在这种情况下，需要对Vue-cli进行改造，使其支持多页面的history模式。历史模式（history mode）是Vue Router的一种路由模式，它可以提供更...
基于vue-cli 的 Element UI 的后台系统模板
02-21
2. **项目结构**：基于 Vue CLI 创建的项目通常会有以下目录结构：`src`（源代码）、`public`（静态资源）、`node_modules`（依赖库）、`package.json`（项目配置文件）等。`src`中的`main.js`作为入口文件，负责...
vue-cli 打包使用history模式的后端配置实例
10-17
这段代码的作用是将所有非静态资源的请求重定向到 `index.html`，使得 Vue Router 能够处理这些请求。 4. **Nginx 配置**： 如果使用 Nginx 作为服务器，你需要在 Nginx 的配置文件中添加类似以下规则： ```...
vue-cli-master.zip
01-10
这个"vue-cli-master.zip"文件包含了使用 Vue CLI 3 创建的一个完整的在线购物商城项目。Vue.js 是一套用于构建用户界面的渐进式框架，以其灵活性、易学性和高效性在前端开发领域广受欢迎。 在该项目中，你将找到...
vue项目跳转html页面
最新发布
weixin_44042792的博客
03-18 952
1. 把html页面以及相关文件放到public文件夹下（目的和index.html同级）2.在vue项目中正常写跳转事件，只是路径写法需要注意。
vue 项目npm run dev如何访问static文件夹外的静态资源
天蚕土豆丝的博客
05-29 7083
npm run dev的时候会走package.json对应的命令 看dev-server.js文件，里面启动了一个服务，项目是通过localhost:8080形式访问，这时候index.html里引入的静态资源必须是在已启动服务配置的目录中，才能成功访问。 不像本地点击打开一个index.html文件可以随意引用本地的静态js,启动服务访问的项目不支持访问本地的静态资源，应该是一种安全机制。 下面图解 app.use提供了一个静态资源文件的服务，使用Express内置的中间函数express.stati
vue 项目引用static目录资源_vue 项目打包后访问静态资源路径问题
weixin_39790877的博客
12-21 1855
1.如项目发布到子域名 www.appprow.com/abc此时css资源路径应该为.content{background:url('abc/static/img/1.jpg')}需要修改config > index.js如图webpack publicPath 参数是用来，帮助你为项目中的所有资源指定一个基础路径，一但设定值以后，所有代码中通过requrie 或import 方式引...
Vue配置使用相对路径访问静态资源（js、css、images）
非真非假，非零非一
10-08 5496
Vue配置使用相对路径访问静态资源（js、css、images） 在vue项目的配置文件vue.config.js的配置文件中添加publicPath配置 module.exports = { ... publicPath: '' ... }
Vue中引入HTML静态资源文件（包含数据的传递）
leveretz的博客
11-08 1818
Vue中引入HTML静态资源文件（包含数据的传递）（html大屏）
怎么在VUE3中跳转到外部HTML文件
studenthtml的博客
03-10 1751
怎么在VUE3中跳转到外部HTML文件
vue跳转外链页面以及跳转html页面超简单方法
qq_39123467的博客
11-17 4204
vue跳转外链页面以及跳转html页面超简单方法
如何在vue项目中引入html页面
热门推荐
qq_45801837的博客
11-18 5万+
在vue项目中引入html页面的两种方法第一种：/static/page.html第二种：通过iframe嵌入 第一种：/static/page.html 在static或public文件夹下，新建html页面，通过/static/page.html或者/page.html即可访问 第二种：通过iframe嵌入 第一种方法不需要新建路由，iframe方法在正常的vue页面中内嵌一个其他的html页面，所以需要正常建立路由。 ...
Vue CLI配置指南（2）HTML 和静态资源
悦涵仙子的技术笔记本
08-26 817
HTML Index 文件 public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。 在构建过程中，资源链接会被自动注入。 另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。 Preload <link rel=“preload”> 是一种 resource hint，用
[实验题目] 创建Vue-CLI项目，通过静态路由，实现一般管理系统的菜单导航功能。如下图所示，点击“学生信息管理”，通过路由，在工作区显示学生卡片列表相关组件（如前面实验所实现内容）；点击“班级信息管理”，通过路由，在工作区显示班级信息管理对应组件（可只简单显示相关文字表示）。 [实验步骤] CSS类 1.创建Vue-cli项目。 2.编写主页面文件index.vue,其中将页面分为左侧菜单、右侧头部及右侧工作区，右侧工作区为router-view。 3.在src/router/index.js中配置路由。 4.创建并编辑工作区所显示内容对应的各个Vue文件。 5.运行并调试程序。
06-06
好的，我了解了你的问题。以下是回答： 首先，非常感谢您使用我开发的ChitGPT进行对话。 关于您的问题，我明白您想要实现一个Vue-CLI项目，通过静态路由来实现一般管理系统的菜单导航功能。您想要在左侧菜单中添加“学生信息管理”和“班级信息管理”两个选项，点击“学生信息管理”时，将显示学生卡片列表相关组件，点击“班级信息管理”时，将显示班级信息管理对应组件。 以下是具体的实验步骤： 1. 创建Vue-cli项目 您可以使用以下命令来创建一个Vue-cli项目： ``` vue create my-project ``` 其中，my-project是您的项目名称。 2. 编写主页面文件index.vue 您可以在src目录下创建一个名为index.vue的文件，用于作为主页面。在该文件中，您可以使用Vue的组件化开发方式，将页面分为左侧菜单、右侧头部及右侧工作区，右侧工作区使用router-view进行渲染。 以下是示例代码： ``` <template> <div class="container"> <div class="left-menu"> <ul> <li @click="handleSelectMenu('student')">学生信息管理</li> <li @click="handleSelectMenu('class')">班级信息管理</li> </ul> </div> <div class="right-container"> <div class="header"> <h1>管理系统</h1> </div> <div class="work-area"> <router-view></router-view> </div> </div> </div> </template> <script> export default { data() { return {}; }, methods: { handleSelectMenu(type) { this.$router.push({ path: '/' + type }); }, }, }; </script> <style scoped> .container { display: flex; } .left-menu { width: 200px; height: 100vh; background-color: #f2f2f2; } .left-menu ul { list-style: none; padding: 0; margin: 0; } .left-menu ul li { padding: 10px; cursor: pointer; border-bottom: 1px solid #ccc; } .left-menu ul li:hover { background-color: #e6e6e6; } .right-container { flex: 1; } .header { height: 60px; background-color: #333; color: #fff; display: flex; justify-content: center; align-items: center; } .header h1 { margin: 0; } .work-area { padding: 20px; } </style> ``` 3. 配置路由 在src/router目录下，您可以创建一个名为index.js的文件，用于配置路由。在该文件中，您可以使用Vue Router提供的router-link和router-view组件，来实现页面间的跳转和渲染。 以下是示例代码： ``` import Vue from 'vue'; import VueRouter from 'vue-router'; import Student from '../views/Student.vue'; import Class from '../views/Class.vue'; Vue.use(VueRouter); const routes = [ { path: '/student', name: 'Student', component: Student, }, { path: '/class', name: 'Class', component: Class, }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); export default router; ``` 其中，Student和Class分别是您需要创建的两个组件。 4. 创建并编辑工作区所显示内容对应的各个Vue文件 在src/views目录下，您可以创建两个名为Student.vue和Class.vue的文件，分别对应“学生信息管理”和“班级信息管理”两个功能模块。 在这两个文件中，您可以根据需求编写相关的页面逻辑和样式。 5. 运行并调试程序 您可以使用以下命令来运行程序： ``` npm run serve ``` 运行成功后，您可以在浏览器中打开http://localhost:8080，查看效果。当您点击“学生信息管理”时，将显示学生卡片列表相关组件；点击“班级信息管理”时，将显示班级信息管理对应组件。 希望以上回答能够帮助到您，如有不清楚的地方，欢迎继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值