配置history模式

(history:在开发模式下,就算没有配nginx也是可以运行的,在打包后的模式下,没有后台配置的话,刷新就找不到页面了)

1、vue中

    const router = new VueRouter({
	  mode: 'history', // 模式选择history
	  routes: [...]
	})

2、nginx

        location / {
            root   D:/phpstudy_pro/WWW/ant-design-vue-pro-master/dist; // 自己打包后的文件目录
            index  index.html index.htm;
	        try_files $uri $uri/ /index.html; 
        }

说明:假设当前的访问路径为:http://127.0.0.1/abc/index.html

        try_files  // 重定向

                      $uri: (代表的是目录),首先查找abc目录下的index.html,如果找到则返回,
                      $uri/ : (代表的是目录),接着查找abc/ 目录下的子目录,如果找到则返回,
                      /index.html : 代表前面都找不到的情况,直接返回index.html

### Nginx 配置 Vue.js History 模式 在使用 Vue Router 的 history 模式时,由于其依赖于 HTML5 历史 API 动态修改 URL 路径而不刷新页面[^3],因此需要服务器支持重定向所有未匹配的路径到应用入口文件 `index.html`。以下是基于 Nginx 的具体配置方法: #### Nginx 配置示例 以下是一个标准的 Nginx 配置模板,用于支持 Vue.js 应用的 history 模式。 ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/vue/app/dist; # 替换为实际部署目录 index index.html; location / { try_files $uri /index.html; # 将未匹配的路径重定向至 index.html } error_page 404 /index.html; # 可选:处理 404 错误并指向首页 location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { expires max; add_header Cache-Control "public"; } } ``` 上述配置的关键部分在于 `try_files $uri /index.html` 这一行,它确保任何未找到的实际资源都会被重写为访问 `index.html` 文件,从而让 Vue Router 处理路由逻辑。 --- #### 注意事项 1. **静态资源缓存优化** 对于 CSS、JavaScript 和图片等静态资源,可以通过正则表达式匹配扩展名,并为其设置较长的有效期(如 `expires max;`),减少重复加载带来的性能损耗。 2. **HTTPS 支持** 如果网站启用了 HTTPS,则需调整监听端口为 443 并添加 SSL 配置。例如: ```nginx listen 443 ssl; ssl_certificate /etc/nginx/ssl/certificate.crt; ssl_certificate_key /etc/nginx/ssl/private.key; ``` 3. **子路径部署** 若项目部署在非根路径(如 `/my-app/` 下),应更新 `vue.config.js` 中的 `publicPath` 设置以及对应的 Nginx 配置中的 `location` 匹配规则。 --- #### 测试与验证 完成配置后,重启 Nginx 服务以使更改生效: ```bash sudo nginx -s reload ``` 随后,在浏览器中测试不同路由是否能够正常工作而不会返回 404 页面。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值