nginx配置vue h5 history去除#号

Vue路由与Nginx配置
本文介绍如何在Vue项目中配置路由模式去除URL中的#号,并通过Nginx实现前后端分离部署,解决页面刷新后的404问题。

vue的默认配置是使用hash模式,这样我们访问的时候都带有了一个#号,再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式,优势就出现了需要去除#号,于是vue端就需要配置该模式,并且使用懒加载,vue端的配置如下:

首先先声明一下,这是使用vue+nginx实现前后端分离的项目,并且使用vue axios实现代理功能(允许跨域并且服务端已经开启跨域),

然后就是打包的配置:

!!!注意,这里配置的assetsPublicPath一定要配置成  "/"  而不是  "./"之类的,不然nginx服务端即使配置成为了vue h5 history模式,也会出现如下错误:

Uncaught SyntaxError: Unexpected token <
manifest.16a4233693dc526194f6.js:1 Error: Loading chunk 23 failed.
    at HTMLScriptElement.t (manifest.16a4233693dc526194f6.js:1)
d.oe @ manifest.16a4233693dc526194f6.js:1
Promise.catch (async)
component @ app.a879af571e30c08073af.js:1
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
ve @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
h @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ app.a879af571e30c08073af.js:1
h @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
pe @ vendor.8f8ebced8a21d4a0633a.js:6
_e.confirmTransition @ vendor.8f8ebced8a21d4a0633a.js:6
_e.transitionTo @ vendor.8f8ebced8a21d4a0633a.js:6
t.push @ vendor.8f8ebced8a21d4a0633a.js:6
Pe.push @ vendor.8f8ebced8a21d4a0633a.js:6
b @ vendor.8f8ebced8a21d4a0633a.js:6
t @ vendor.8f8ebced8a21d4a0633a.js:12
Fi.t._withTask.s._withTask @ vendor.8f8ebced8a21d4a0633a.js:12
vendor.8f8ebced8a21d4a0633a.js:6 Error: Loading chunk 23 failed.
    at HTMLScriptElement.t (manifest.16a4233693dc526194f6.js:1)

所以,请谨慎配置,坑比较多,下面就是nginx服务端的配置了,

 

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        #根据路由设置,避免出现404
        location ^~ /api/ {
                add_header 'Access-Control-Allow-Origin' '*';
                proxy_pass http://service.xxxx.com/;
        }
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }

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

这样配置就算是配置好了,然后就不会出现页面刷新显示404的错误了。

### 如何在Linux服务器上配置Nginx以部署HTML5应用程序 #### 更新系统的软件包信息 为了确保安装最新版本的Nginx,在开始之前应该更新系统的软件包列表。对于基于Debian/Ubuntu的系统,可以执行如下命令来刷新本地数据库中的可用软件包列表[^2]。 ```bash sudo apt update ``` #### 安装Nginx 接着按照操作系统的不同选择合适的方式安装Nginx。这里给出适用于Ubuntu的操作指令: ```bash sudo apt install nginx ``` 这一步骤将会从官方仓库获取并安装最新的稳定版Nginx及其依赖项[^4]。 #### 启动Nginx服务 一旦安装完成,大多数情况下Nginx会自动启动。可以通过下面这条命令确认其状态;如果不是处于活动(active)状态,则可尝试手动激活它。 ```bash systemctl status nginx ``` 如果不活跃,使用此命令启动: ```bash sudo systemctl start nginx ``` #### 找到`nginx.conf`的位置并对之进行修改 通常来说,默认配置文件位于/etc/nginx/nginx.conf 或者 /etc/nginx/conf.d/default.conf 中。要使Nginx支持单页应用(SPA),比如React, Vue等框架构建的应用程序,需要调整server区块内的设置以便正确处理前端路由请求。 以下是针对HTML5 History模式的一个典型配置实例: ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; # 修改为实际路径 try_files $uri $uri/ /index.html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; } ``` 这段配置指示当找不到对应资源时返回根目录下的`index.html`页面,从而让JavaScript接管后续导航逻辑。 #### 检查配置的有效性以及重新加载Nginx 更改配置之后应当检验新设定是否存在语法错误,并据此决定是否继续下一步动作。 ```bash sudo nginx -t ``` 假如一切顺利的话就可以安全地重启或重载Nginx了,这样改动才会生效。 ```bash sudo systemctl reload nginx ``` #### 设置开机自启与防火墙规则 为了让Nginx能够在每次机器重启后依然保持在线工作,建议开启该服务随系统一同启动的功能。 ```bash sudo systemctl enable nginx ``` 另外还需注意开放必要的网络端口(通常是HTTP协议使用的TCP 80端口), 这样外部设备才能成功连接至Web服务器。 ```bash sudo ufw allow &#39;Nginx Full&#39; ``` 以上就是关于如何在Linux环境中利用Nginx部署HTML5应用程序的大致流程介绍[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农小何

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值