vue采用history路由的服务器部署问题
发现部署问题
在部署的时候发现打开的页面是空白
之前部署原理
之前的页面都是作为静态文件形式打包上传到服务器上
http://www.xiedashuaige.cn/bolg2.0/#/home
就和这个页面一样,我其实上只有一个页面/bolg2.0
然后前端的路由切换都是根据后面的哈希值来变化
然后不同的哈希值指向的页面还是/bolg2.0页面
所以就放在静态目录都可以访问
部署问题解析
然后我用了history路由后打开的页面页面的时候发现服务器报404
http://www.xiedashuaige.cn/BolgAdmin/admin
首先我在服务器上对应的静态页面是/BolgAdmin页面
但是我前端路由的首页是/BolgAdmin/admin这个页面
但是服务器以为/BolgAdmin/admin是单独的一个页面资源
然后又找不到这个资源,所以就会报404
分析问题
然后我想了两种解决方法
- 一种就是在服务器上设置一个转发,把所有/BolgAdmin下面的子路由全部转发到/BolgAdmin页面下,但是对于服务器的我不太了解
- 通过node写一个后端就像http://www.xiedashuaige.cn:3000一样,然后访问http://www.xiedashuaige.cn:3000/BolgAdmin/admin的页面全部转发到http://www.xiedashuaige.cn:3000/BolgAdmin上面,这样就可以通过node来实现,比使用apache来改应该简单一些,我还在研究中。。
解决问题
正好在学koa就用koa搭建了一个服务器,代码如下
const fs = require('fs')
const Koa = require('koa')
const route = require('koa-route')
const path = require('path')
const static = require('koa-static')
const app = new Koa()
const main = ctx => {
ctx.response.type = 'html'
ctx.response.body = fs.createReadStream(path.join(__dirname, '/index.html'))
}
const toMain = ctx => {
ctx.response.redirect('/admin/')
}
const staticFile = static(path.join(__dirname, '/'))
app.use(staticFile)
app.use(route.get('/', toMain))
app.use(route.get('/admin/*', main))
app.listen(3001)
其实就是搭建了一个静态目录,然后把/目录重定向到/admin目录下,然后把/admin/*目录全部打开index文件
然后这样就可以打开vue history模式的单页面应用了
结语
其实吧最后还是有一个问题,是针对于我这个项目的。我这个项目使用了vue的代理跨域,然后后端是用go写的跑在另外一个端口,所以最后直接把打包后的文件让go来做相同的处理,其实主要是了解了一波history模式会出现的问题咯。
vue采用history路由的服务器部署问题的更多相关文章
- Vue.js项目在apache服务器部署后,刷新404的问题
原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = n ...
- nodejs服务器部署教程一
第一篇教程紧紧让你输出一个hello world 环境介绍 服务器环境:ubuntu(16.04)64位 本地环境:windows10 64位 连接工具:mobaxterm ubuntu安装和基本配置 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- win10系统本地iis或nginx服务器部署vue.js项目
1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安 ...
- hash和history路由的区别
在了解路由模式前,我们先看下 什么是单页面应用,vue-router 的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...
- 告别 hash 路由,迎接 history 路由
博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...
- vuejs如何在服务器部署
title: vuejs如何在服务器部署 date: 2017-10-31 20:41:03 tags: [vue] --- 上传到网站服务器 Vue 是一个 javascript 的前端框架,它是运 ...
随机推荐
- 编译警告:warning: operation on ‘i’ may be undefined
dest[i++]=src[i]; 这行代码,编译时会遇到警告: warning: operation on ‘i’ may be undefined(对于i变量的操作,有可能是未定义的) 改成 de ...
- Codeforces Round #637 (Div. 2) 题解
A. Nastya and Rice 网址:https://codeforces.com/contest/1341/problem/A Nastya just made a huge mistake ...
- Java——Java自动装箱和拆箱
一.什么是自动装箱和拆箱: 我们知道java为8种基本类型分别提供了对应的包装类型,在Java SE5之前,如果要生成一个数值为10的Integer对象,必须这样进行: Integer i=new I ...
- 使用Codemirror打造Markdown编辑器
前几天突然想给自己的在线编译器加一个Markdown编辑功能,于是花了两三天敲敲打打初步实现了这个功能. 一个Markdown编辑器需要有如下常用功能: 粗体 斜体 中划线 标题 链接 图片 引用 代 ...
- matlab基础知识总结
- 从浅入深——理解JSONP的实现原理
由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的 数据接口,浏览器认为这种访问不安全: 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口 ...
- windows中的项目拷贝到linux中,部分数据不显示的原因
linux严格区分大小写,可能是数据表名大小写导致的. 如上传文件不成功,可能是系统权限导致的.
- equals(), "== ",hashcode() 详细解释
Object 通用方法容易混淆的定义 先搞清楚各自的定义 "==" 用来判断 相等 equals() 用来判断 等价 hashcode() 用来返回散列值 "==&quo ...
- Millar Robin模板
\(Millar Robin\)模板 hdu2138 \(Code\) #include <cstdio> #include <iostream> #include <a ...
- jquery监听input
$(function(){ //输入框正在输入时 $("#ipt").on('input',function(){ if(!($('#ipt').val()=='')){ $(&q ...