vue.js vue-router history模式路由，域名二级目录子目录nginx配置

最新推荐文章于 2024-06-04 08:45:19 发布

转载最新推荐文章于 2024-06-04 08:45:19 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://segmentfault.com/a/1190000015753352

标签

#运维 #javascript #ViewUI

收录于

本文介绍如何在Nginx服务器中正确配置Vue.js项目的路由，确保SPA应用的正常运行。通过修改三个关键配置项：路由模式、静态资源路径及Nginx的try_files指令，实现对Vue项目的优化部署。

修改三个配置，具体操作日后有时间更新，不懂私聊
1

const route = new Router({
  mode: 'history',
  base: '/doctor-html/',
  routes
})

assetsPublicPath: '/doctor-html/',

try_files $uri $uri/ /doctor-html/index.html;

4
项目目录配置实例
项目路径web/doctor-html/index.html
nginx配置root指向 web/ 项目放在doctor-html，但是nginx指向web，url访问com/doctor-html就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34014277

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

YOLOv7从tiny到e6e：一张图看懂所有变体模型的网络结构差异

最新发布

weixin_33743661的博客

04-29

825

本文深入解析YOLOv7从Tiny到E6E各变体模型的网络结构差异，提供详细的选型指南和性能优化技巧。通过对比不同变体的参数和适用场景，帮助开发者在边缘设备、移动终端和云端服务器等环境中找到最佳平衡点，提升目标检测效率。

参与评论您还未登录，请先登录后发表或查看评论

vite vue3 下配置 history 模式路由+解决chrome94解决私有网络请求

pakchoily的博客

06-08

1万+

vite 下，打包后采用history模式详解

vue cli3+ history模式在nginx部署至子目录（二级目录或多级目录）配置

qq_27209011的博客

11-13

1224

vue cli3+ history模式在nginx部署至子目录（二级目录或多级目录）假如我们部署到线上的访问的地址是 http://localhost:8080/admin/ 那这里的子目录就是 /admin/ 1、在 router/index.js 中设置base属性，值就是子目录 /admin/ mode: history, base: '/admin/', 2、修改 vue.con

Vite + history模式部署子目录 跨域请求的问题

yulevip0的专栏

02-27

1714

原因: 打包时没有设置子目录, 默认按照根目录进行打包的, 这样的话, 页面引用的各种文件路径就不对了.我们的期望: vite项目在本地开发调试完成后, 打包到dist文件夹, 然后上传到你的服务器子目录(", http://xx.com 可正常访问, 期望通过 http://xx.com/可修改路由模式为 mode: 'hash', 但这样地址栏会一直有#, 不美观.好了, 相关的文件如何配置都列出来了. 如有任何问题, 欢迎评论区讨论~就可以通过 http://xx.com/

vite部署域名子目录项目

weixin_44959182的博客

07-20

3259

vite项目直接打包放到域名子目录中会显示白页，这样配置一键解决。

vue新增子路由不跳转或者跳转报错

m0_51737922的博客

04-17

1091

vue路由跳转空白或者控制台报错

Vue 路由history模式nginx部署(二级目录)

weixin_40749372的博客

10-20

3237

公司常用服务器为apache，最近一个项目需部署到nginx目录，且是在子目录下，即访问链接：http://www.xxx.com/rector/bnu/ apache服务器配置很简单，只需要在index.html同级目录下添加.htaccess文件即可，代码如下： RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /rector/b.

Vue项目子目录部署完整指南

油墨香^-^的博客

06-04

1293

Vue项目部署在子目录下的关键配置包括：1）构建工具中设置base路径（Vite的base选项或Vue CLI的publicPath）；2）Vue-Router使用HTML5历史模式时需配置相同base路径；3）Nginx需添加try_files回退规则，确保路由正常跳转。这些配置共同保证了静态资源正确加载和路由导航功能，适用于多项目共存的部署场景。

vue history 模式打包部署在域名的二级目录的配置指南

qq_35149546的博客

07-29

1253

1.vue history 模式打包部署在域名的二级目录的配置指南 2.vue history 模式打包部署在域名的二级目录的配置指南 3.vue.js vue-router history模式路由，域名二级目录子目录nginx配置 4.vue-router中的history模式，域名二级路由，子目录nginx中的配置 5.vue+webpack+vue-router(history) 部...

VUE+Nginx history路由模式下，解决页面刷新404

趁年轻，多学点

12-30

2114

vue+nginx history模式打包后，刷新404问题

[vue-router] history模式下路同无法跳转

qq893182474的博客

03-07

5884

本地dev运行和build-nginx运行，vant的样式异常和组件van-popup 包 van-cascader 的弹框显示不出内容！出现此问题的上一步是因为项目中配置的cdn无法访问，导致界面加载混乱，所以将cdn的引入屏蔽。但是本地开发时，屏蔽了就导致vue-router报错，点击按钮跳转子路由时无反应，报错如下：第一次突破，发现如果把屏蔽的cdn打开，就能正常点击了。问题，但是这是做的移动端网站，手机上加载图书入库时，要选库位（van-popup 包 van-cascader

解决使用history拿不到路由上参数的问题

weixin_41424721的博客

05-08

1155

import qs from 'qs' routeParams () { const param = (window.location.search.replace(/^\?/, '')) return qs.parse(param) || {} },

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

weixin_30455661的博客

10-23

923

一. 异常描述：本来使用的是vue-router的hash模式，但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），所以就需要使用history模式，然后就让后端改下nginx配置： location / { try_files $uri $uri/ /index.html; } vue-ro...

VueRouter-在嵌套路由的过程中子路由不显示的问题

weixin_44161147的博客

07-18

5793

VueRouter-在嵌套路由的过程中子路由不显示的问题代码场景预期的是下面的展示：新闻和消息为嵌套的路由，当点击新闻的时候，会展示新闻列表，当点击消息的时候，会出现消息列表错误场景但是当我运行的时候，点击新闻按钮，不显示新闻子路由的内容，点击消息按钮，也不显示消息子路由的内容，代码也没有报错解决方案 1.父组件中没有写“router-view"标签，在父组件中补上即可： 2.在配置子路由router的过程中子路由的path没有加"/" { path: '/h

vue2 部署到二级目录下的相关配置

态度决定一切

01-29

1496

vue2 项目部署到二级目录下

vue.config.js publicPath 和 vue-router base 结合配置项目根目录为二级目录案例

又是再见?

02-26

965

同个域名下需要有 PC 管理后台, H5 端, 企业微信 ......等多个端, 需要在一个域名下通过不同的路径来区分不同的项目;例如: abc.com/pc, abc.com/h5, abc.com/wx-work....1. 修改 vue.config.js 中的 publicPath。3. 文件上传到服务器, 此处以Linux + Nginx 为例。2. 修改 router.js 中 new Router 部分。4. 修改Nginx 配置文件。

Vue中路由嵌套（子路由）