版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bocongbo/article/details/83957206
vue项目直接打包发布在服务器上,访问项目非根目录路由,刷新界面的时候,会出现404情况。这是由于服务端不识别vue的路由配置,所以在遇到404的情况,要返回index.html,让vue自己去寻找自己的路由页面。
vue打包注意点请看我的另一篇博客:(有一定关联)
https://blog.csdn.net/bocongbo/article/details/81670072
一、Apache服务器
1、修改Apache配置文件httpd.conf,并重启Apache
LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#
AllowOverride None,改成AllowOverride All
2、Apache的www/jnwtv-live-cartoon-h5/目录下新建 .htaccess文件, 修改RewriteRule为 /jnwtv-live-cartoon-h5/index.html
如下:(注意:点和反斜杠中间有一个空格,该文件和打包的index.html同级)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /jnwtv-live-cartoon-h5/index.html [L]
</IfModule>
二、Nginx服务器
1、进入Nginx配置文件
cd /etc/nginx/conf.d
2、编辑default.conf配置文件 vim default.conf
server {
listen 80;
server_name localhost;
#--------配置跟目录是vue的项目
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#--------结束配置跟目录是vue的项目
#--------配置非根目录vue项目
location ^~/jnwtv-live-cartoon-h5 {
alias /usr/share/nginx/html/jnwtv-live-cartoon-h5;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^/(jnwtv-live-cartoon-h5)/(.+)$ /$1/index.html last;
}
#--------结束配置非根目录vue项目
error_page 404 /404.html;
error_page 500 501 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
3、重启Nginx
nginx -s reload
三、其他后台语言
1、把后台404情况,全部返回vue的index.html给客户端,就可以了
2、以nodejs为例
router.get('*', controller.home.index); //写在接口末尾,404全部返回index.html