nginx配置vue h5 history去除#号

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的错误了。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以将NGINX配置为代理Vue项目,并使用nginx配置的location指令来指向Vue项目中的history模式路由。这样在浏览器中打开URL时,会先匹配nginx配置中的location指令,然后将请求代理到vue项目中的对应路由。这样就可以在Vue项目中使用history模式的路由了。 ### 回答2: 在nginx配置Vue项目的history模式时,需要注意以下几个步骤: 1. 配置Vue项目的router 在Vue项目的router中,需要设置mode为history,这将会把url中的#去掉,使得url看起来更加清晰。 2. 配置nginxnginx配置文件中,需要添加以下代码: ``` server { listen 80; # 设置网站根目录 root /path/to/vue/project/dist; # index文件名字或者正则 index index.html; # 设置404页面 error_page 404 /index.html; # 处理静态文件 location /static/ { # 静态文件目录 alias /path/to/vue/project/static/; } # 处理前端路由 location / { # 将任何请求都转到index.html try_files $uri $uri/ /index.html; } } ``` 这段代码中,我们通过设置根目录和index文件名来配置站点根目录。然后通过设置error_page 404 /index.html来处理404错误,方便前端路由处理。最后,通过设置try_files来将所有请求都转发到index.html文件。 3. 重新加载nginx配置 在修改完nginx配置文件后,需要使用如下命令来重新加载nginx配置: ``` nginx -s reload ``` 这样就完成了nginx配置Vue项目history模式的过程。 总结:通过以上的配置,我们可以在nginx中成功配置Vue项目的history模式,使得我们的Vue项目可以更加完美地运行在生产环境中。 ### 回答3: Vue项目是一种前端框架,基于MVVM模式,可以帮助我们进行前端开发。在使用Vue构建单页面应用的时候,我们通常需要使用ngnix来配置history模式。 首先,我们需要确保Nginx已经正确安装。接着,我们可以在Nginx配置文件中进行如下配置: ``` location / { try_files $uri $uri/ /index.html; } ``` 此处$uri表示请求的URL的路径,/index.html表示我们要渲染的页面。 接下来,我们需要配置nginx.conf文件中的server阻塞,设置如下: ``` server { listen 80; server_name example.com; root /path/to/project; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 其中的example.com是我们要配置的域名,/path/to/project是我们的Vue项目路径。 最后,我们需要重新启动Nginx服务器,以使配置文件生效。 在这个配置中,我们使用了try_files指令来检查我们的请求路径和文件是否存在。如果不存在,它将把请求重定向到index.html文件中,这正是我们需要的history模式的机制。 在这种情况下,我们可以使用history.pushState API来在URL栏中模拟页面的状态,并根据这些状态来渲染页面。 综上所述,以上是Nginx配置Vue项目history的方法。希望对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

码农小何

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

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

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

打赏作者

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

抵扣说明:

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

余额充值