vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue目录下,则需要做路径配置,并做history配置
一、 需要修改router.js
中new Router
配置,加一个 base: '/vue/'
, 它指定应用的基路径,默认是根路径'/',表示该应用是服务于localhost/vue
路径下,所以必须加base
配置,否则应用会展示404页面,当然了用history路由的话也必须加 mode: 'history';
二、 在vue.config.js的 module.exports = { publicPath: '/vue/' }; , 默认根路径'/'
三、 修改httpd.conf
文件,开启rewrite_module功能:
1. LoadModule rewrite_module libexec/apache2/mod_rewrite.so
,去掉前面的#,打开注释。一般搜索 mod_rewrite.so 能够找到,不同的服务器可能前面的红色路径不太一样
2. 找到 AllowOverride None
的那行,把它改成 AllowOverride All
,来使 .htaccess
文件生效。
四、 在apache 的www/vue
目录下新建 .htaccess
文件(此文件是看不到目录的但是在命令行貌似可以查到), 需要修改RewriteRule
为/vue/index.html
, 否则刷新页面服务端会直接报404错误
.htaccess文件内容
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /vue/index.html [L]
</IfModule>
发布到其他路径或是更深的路径配置都是类似的
参考:https://segmentfault.com/a/1190000012548105
最新文章
- 分布式缓存技术memcached学习(二)——memcached基础命令
- 初学软件测试之——如何使用Junit4
- [IOS多线程]的使用:防止进行HTTP数据请求时,UI卡死。
- leetcode 124. Binary Tree Maximum Path Sum
- 重构第21天 合并继承 (Collapse Hierarchy)
- 用C语言代码判别CPU的大小端模式
- Webform Repeater的灵活运用
- java实现从实体到SQL语句的转换(二)
- hdu1370-Biorhythms
- Struts框架的入门使用
- 1000行代码徒手写正则表达式引擎【1】--JAVA中正则表达式的使用
- Java线程池带图详解
- session设置过期的方法(转载)
- [记录]CentOS搭建SVN服务器(主从同步)
- 竞赛基础篇---部分和问题(DFS)
- 预攻击 局域网 Windows 查看其它在线设备
- [UE4]镜像
- java操作docker示例(docker-java)
- February 28th, 2018 Week 9th Wednesday
- Android studio中布局文件出现render problem问题