美文网首页
在一个前端静态页面工程中添加一个单页面程序

在一个前端静态页面工程中添加一个单页面程序

作者: 追风骚年 | 来源:发表于2023-01-30 13:47 被阅读0次

假如现在的工程静态工程目录如下:

$  html tree
.
├── index.html
└── test.html

1 directory, 2 files

$ cat index.html
<html>
<head>
<meta charset="UTF-8">
<head>
<body>
我是静态index 页面
<ul>
<li> <a href="test.html" >点我跳转test </a> </li>
<li> <a href="vue.html" >点我跳转 vue</a> </li>
</ul>
</body>

$ cat -p test.html
<html>
<head>
<meta charset="UTF-8">
<head>
<body>
我是静态页test
</body>

假如有个待部署 vue 单页面项目并且已经并且已经打包好到 dist 目录

$ tree
.
├── assets
│   ├── AboutView-4d995ba2.css
│   ├── AboutView-5b5be283.js
│   ├── index-1af959f9.js
│   ├── index-81e4655a.css
│   └── logo-da9b9095.svg
├── favicon.ico
└── index.html

2 directories, 7 files


现在的工作是要融合两个项目,保证页面都能访问,现在摸索到一个这样的方式,对于单页面程序其实只需要一个入口文件,默认一般都是 index.html ,但是如果改名叫其他是否也能工作呢。

$ tree
.
├── assets
│   ├── AboutView-4d995ba2.css
│   ├── AboutView-5b5be283.js
│   ├── index-1af959f9.js
│   ├── index-81e4655a.css
│   └── logo-da9b9095.svg
├── favicon.ico
├── index.html
├── test.html
└── vue.html

2 directories, 9 files

将 vue 项目生成文件,合并到静态工程中,并且将原 index.html 改名为 vue.html, 刷新页面发现一切都工作正常。后面的路由以前都是基于 index.html#xxx,现在都是基于 vue.html#xxxx 了。

经测试最好在使用 router 的时候使用 hash 模式,history 模式的路由跳转会非常奇怪。

相关文章

  • 在一个前端静态页面工程中添加一个单页面程序

    假如现在的工程静态工程目录如下: 假如有个待部署 vue 单页面项目并且已经并且已经打包好到 dist 目录 现在...

  • SignalR学习二:给指定用户发送消息

    ChatHub.cs中添加登陆和单发消息方法 修改前端页面 修改前端js 在connection.start()中...

  • 2019-02-17

    关于前端单页面应用 1.前端单页面应用就是在一个主要的界面上和用户进行交互,在交互的过程中不需要重载一整个新的页面...

  • (17.3.20)团队、标签的初识

    团队:() 产品经理:--设计草图设计师: --设计网页图前端工程师:--网页静态页面---!!!后台:--页面...

  • 前端开发如何提高编写静态页面的速度

    写静态页面,是前端程序员的基本功。断断续续做了一年多的前端开发,写静态页面这事自然难不到我,但是,最近总感觉写页面...

  • 2021-04-12

    单页面应用的优缺点(SPA) 单页面应用程序将所有的活动局限于一个Web页面中,在该Web页面初始化时加载相应的H...

  • web前端介绍

    前端架构分析 开发流程 设计页面样板-->前端工程师将样板做成静态网页-->后端工程师将静态网页修改为动态网页 C...

  • web修炼-SpringMVC实现文件上传下载等实例

    添加上传的Maven依赖 在mvc配置文件中添加上传文件的Bean 创建单上传的前端页面 oneUpload.js...

  • 20160910------JAVAWEB概述

    1、web应用程序 2、静态页面、动态页面 静态页面:网页中内容固定,不会更新。(HTML、CSS) 动态网页:网...

  • angular部署服务器

    1前端展示数据静态页面:定义没有和服务器进行处理的页面静态页面:动画,

网友评论

      本文标题:在一个前端静态页面工程中添加一个单页面程序

      本文链接:https://www.haomeiwen.com/subject/peumhdtx.html