HTML5 History 模式即 vue 前后端分离服务端配置

最新推荐文章于 2025-02-25 09:30:00 发布

原创最新推荐文章于 2025-02-25 09:30:00 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

服务器专栏收录该内容

10 篇文章

订阅专栏

本文档详细介绍了如何配置Vue.js应用在后端服务器上使用HTML5 History模式，包括了针对nginx和Apache服务器的配置示例，以实现SPA（单页应用）的正确路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考原文地址

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

1.nginx 配置

server {
        listen       80;
        server_name nestle.com ;
        root   "D:\install\PHPTutorial\WWW\skscrm\dist";
        location / {
            index index.html index.htm index.php;
            #autoindex on;
            try_files $uri $uri/ /index.html;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param PATH_INFO $fastcgi_path_info;
            fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
}

2.apache配置

①在vue 编译后的项目下即默认dist 根目录下创建一个.htaccess 内容如下

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

② 服务器配置

httpd.conf打开下面配置的注释

LoadModule rewrite_module modules/mod_rewrite.so

然后配置域名位置在设置成以下内容

<VirtualHost *:80>
    DocumentRoot "D:\install\PHPTutorial\WWW\skscrm\dist"
    ServerName nestle.com
    ProxyPass /api/ http://nestle.com:801/api/
<Directory "D:\install\PHPTutorial\WWW\skscrm\dist">
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
     Require all granted
</Directory>
</VirtualHost>