Vue history路由模式 apache配置上线
1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项
说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下的一个叫phptest的文件夹下。
2. 为了防止打包上线引入文件的路径出错, 在vue.config.js文件配置publicPath (我使用的是vue-cli3.0, 2.0的也可以在配置文件中配置)
3.执行 npm run build 执行文件打包上线
4.在对应站点的目录下 phptest 文件夹下新建一个 .htaccess 文件注意前面有个点,
在该文件中书写如下配置
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /phptest/index.html [L] // 注意:这个目录是你设置存放vue上线文件的目录/phptest/index.html
上面表示执行路径的重写
5.最后把刚刚build 出来的dist 目录下的代码复制到phptest目录下就可以了
需要注意的是,记得在vue中准备一个404页面
还有就是 开启apache支持分布式配置(也就是支持.htaccess文件配置)
需要设置 AllowOverride All
需要支持路径重写必须加载重写模块 LoadModule rewrite_module modules/mod_rewrite.so
Vue history路由模式 apache配置上线的更多相关文章
- vue history路由模式 Nginx 生产实践
nginx(带二级目录的配置) location ~* /A { alias /opt/nginx-1.4.7/html/ued/A; try_files $uri $uri /A/s ...
- 单页面应用的History路由模式express后端中间件配合
这篇文章主要分享一下通过HTML5的history API的时候,使用NodeJS后端应该如何配置,来避免产生404的问题,这里是使用的express的框架,主要是通过connect-history- ...
- MT7628如何配置使用 Openwrt路由模式 (校园网配置)
1.设置wan,把网线插入wan口 1) 在 MT7628 开发板上的 3 个网口默认都是“LAN 口”功能,但拨号上网一般需要用到“WAN口”的功能,所以我们需要将其中一个切换为“WAN 口”,这里 ...
- vue切换路由模式{hash/history}
vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...
- history路由模式下的nginx配置
路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash ...
- vue history模式 apache配置
我的服务器apache 版本是2.4.6 看文档上面说加那些代码,但是加上去重启服务器就不能重启,显示代码错误,然后百度查开启mod_rewrite这个重写URL 弄了半天也不会,百度上面的不知道是不 ...
- 19、vue部署路由模式
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash模式带#号 不用配置服务器 如果不想要很丑的 ...
- nginx 一个端口布署多个单页应用(history路由模式)。
目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(i ...
- nginx history路由模式时,页面返回404重定向index.html
1.路由默认是带#的,有时我们感觉不美观,就使其变为history模式,也就没有#字符 2.# 如果找不到当前页面(404),就返回index.html,重新分配路由 location ^~/prod ...
随机推荐
- SpringBoot2整合Redis缓存
遵循SpringBoot三板斧 第一步加依赖 <!-- Redis --> <dependency> <groupId>org.springframework.bo ...
- 基于Blazor写一个简单的五子棋游戏
写这个五子棋游戏,其实主要目的是想尝试一下微软新作Blazor.Blazor对于那些搞.NET的程序员,又想做一些前端工作,真的挺友好,不用一句JS就可搞定前端交互,美哉.现在已经有很流行的前端框架, ...
- Grafana使用总结
最近工作需求学习了下grafana,根据创建的几个dashboard简要记录下创建过程. 本次使用了grafana做可视化展示,data source使用的rds是postgresql和时序数据库in ...
- MVC08
1. c# 索引器(indexer) using System; using System.IO; namespace IO { class Program { ]; static void Main ...
- 【5min+】AspNet Core中的全局异常处理
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- 使用ZXingObjC扫描二维码横竖屏对应
/** 根据屏幕的方向设置扫描的方向 * @author maguang * @param parameter * @return result */ - (void)showaCapture { C ...
- Openwrt 路由器上 安装 svn server
Openwrt 上也可以搭建 svn 服务了,这样就不用开着 ubuntu 了,省电. 在后台打开 ssh 服务,或者使用 telnet 服务,使用 putty 登录路由器. 如下图所示,这里刷的是 ...
- 免ROOT卸载手机自带软件详细教程
一.准备条件 1.电脑一台 2.手机一部 3.WiFi 二.下载所需资源 微信扫码进入搜索,选择安卓软件卸载工具 根据图中提示,按照自己的系统进行下载 三.下载完后解压(以Windows为例),解压后 ...
- MATLAB神经网络(3) 遗传算法优化BP神经网络——非线性函数拟合
3.1 案例背景 遗传算法(Genetic Algorithms)是一种模拟自然界遗传机制和生物进化论而形成的一种并行随机搜索最优化方法. 其基本要素包括:染色体编码方法.适应度函数.遗传操作和运行参 ...
- vue中计算属性中的set和get
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body& ...