假如现在的工程静态工程目录如下:
$ 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
模式的路由跳转会非常奇怪。
网友评论