vue-router中history模式页面报错

Posted 2023-05-11

参考技术A

首先配置路由的时候，

vue-router的默认路由方式是hash,如果想要指定为history模式，则

----------------------------------------分割线-------------------------------------------

原本我的项目是用的hash模式，我天真的以为只要加上mode：\'history\'就可以了，加上之后页面显示不出来，切换tab时候报文件找不到，发现静态资源文件路径不对，会在路径前面拼上一些不该有的信息。
类似：localhost:8080/home/css/common.css。 home不应该带上的
原因是我的router写的

原因是之前的hash模式下，根路径是不会变的，但是在history模式下，根路径会随着嵌套路由的变化而变化的，上面那种方式就不能那样写了。

另外，在文件中引入的静态资源文件，比如‘./images/bg.png’也要改成‘/images/bg.png’;

ps:
./ 是指用户所在的当前目录（相对路径）；
/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；
对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。

参考： https://www.cnblogs.com/xyyt/p/7718867.html

vue-router的history模式发布配置

如果你正在尝试将基于vue-router的项目部署到windows中，希望本文能够有所帮助。

iis配置

无需安装其他组件，将错误页指向index.html即可

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.web>
        <customErrors mode="On" defaultRedirect="index.html">
            <error statusCode="404" redirect="index.html" />
        </customErrors>
    </system.web>
    <system.webServer>
        <httpErrors errorMode="Custom">
            <remove statusCode="404" />    
            <remove statusCode="500" />          
            <error statusCode="500" path="/index.html" responseMode="ExecuteURL" />
            <error statusCode="404" path="/index.html" responseMode="ExecuteURL" />
        </httpErrors>
      
    </system.webServer>
</configuration>

nginx配置

启动如遇问题尝试使用命令创建/logs/nginx.pid文件:nginx -c conf/nginx.conf
不要设置环境变量，重启命令：start nginx -s -reload

server {
    listen       3355;
    location / {
        root F:/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }      
}

原文地址：https://segmentfault.com/a/1190000013186997