vue项目直接打包发布在服务器上,访问项目非根目录路由,刷新界面的时候,会出现404情况。这是由于服务端不识别vue的路由配置,所以在遇到404的情况,要返回index.html,让vue自己去寻找自己的路由页面。

vue打包注意点请看我的另一篇博客:(有一定关联)

vue去掉#,history模式_不求甚解bc的博客-CSDN博客_vue 去掉#

一、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 . /project-name/index.html [L]
</IfModule>

二、Nginx服务器

1、进入Nginx配置文件

cd /etc/nginx/conf.d

2、编辑default.conf配置文件 vim default.conf

server {
    listen       80;
    server_name  localhost;
    
    root /webServer/nginx;
    index  index.html index.htm;

    location /project-name1 {
        try_files $uri $uri/ /project-name1/index.html;
    }
    location /project-name2 {
        try_files $uri $uri/ /project-name2/index.html;
    }

    error_page  404    /404.html;

    error_page  500 501 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3、重启Nginx

nginx -s reload

三、其他后台语言

1、把后台404情况,全部返回vue的index.html给客户端,就可以了

2、以nodejs为例

router.get('*', controller.home.index); //写在接口末尾,404全部返回index.html

Logo

前往低代码交流专区

更多推荐