在一个前端静态页面工程中添加一个单页面程序
2023-01-30 本文已影响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模式的路由跳转会非常奇怪。
