Apache，Nginx部署vue项目

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

Apache，Nginx部署vue项目

猜你喜欢