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

最新推荐文章于 2024-04-06 22:38:10 发布

永不止步不言放弃

最新推荐文章于 2024-04-06 22:38:10 发布

阅读量3.4k

点赞数 1

可以修改三个配置

1.路由

const route = new Router({

mode : 'history',

base: '/admin/',

routes:[]

})

2.打包文件 config/index.js

build设置

assetsPublicPath: '/admin/',

3.nginx配置

try_files $uri $uri/ /admin/index.html;

4.项目目录配置实例

项目路径 web/admin/index.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

永不止步不言放弃

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue build 与 nginx采用二级路由配置

Jonny的博客

05-25

1450

文章目录引言解决方案vue.config.jsnginx配置引言在项目中一个项目上存在多个子应用系统，对多个系统路径统一访问时用二级路由来区分对应的子应用，但是在开始的时候折腾了很久始终没得到解决。解决方案 vue.config.js 具体的详情参见：vue cli 对应Dir配置 module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub pat

手写路由Vue-Router源码实现原理

m0_74079648的博客

10-24

1009

这段代码通过定义VueRouter类和install方法，实现了一个简化版的Vue Router。它允许开发者定义路由规则，并在Vue应用中通过和组件实现页面导航和组件渲染。尽管这个实现相对简单，但它展示了Vue Router的核心概念和工作原理。

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

vue-cli打包并配合nginx域名二级子目录

qinchaidaren的博客

03-09

2731

可以修改三个配置 1.路由 const route = new Router({ mode : 'history', base: '/admin/', routes:[] }) 2.打包文件 config/index.js build设置 assetsPublicPath: '/admin/', 3.nginx配置 try_files $uri $uri/ /admin/in...

vue history项目部署根域名子目录下

weixin_45730243的博客

03-13

508

vue history项目部署根域名子目录下 //完整路径 http://baidu.com/h5 const router = new VueRouter({ mode: "history", base: "/h5",//比如子目录是/h5 routes, }); // vue.config.js 配置 publicPath:"/h5"

nginx部署vue项目_vue 多项目部署---二级目录

weixin_39797780的博客

12-05

730

新项目：同一域名下部署多个vue项目，根目录vue项目不需要按下面的方式进行打包部署https://www.bitedit.com/下面三个项目以二级目录部署https://www.bitedit.com/hmange https://www.bitedit.com/api https://www.bitedit.com/restful 以上链接不可用，作为示例，不要点击。此方法适用于多vue项目...

vue-router路由history模式+nginx部署项目到非根目录下(实践版)

奔跑的痕迹的博客

11-23

6491

你总是心太软心太软独自一个人研究到天亮你无怨无悔的疯狂找寻我知道你根本没那么坚强你总是心太软心太软把所有问题都自己扛问题总是太多解决太难不是你的就别再勉强夜深了你还不想睡你还在想着他吗你这样执着到底累不累明知他不会那么容易只不过想早点睡一觉可惜他无法给你机会翻遍网络没有想要结果喔,算了吧。。。。。不我还要再找找最近经历了如上歌词的生活，大致是这样的：开发一个项目，发现使用hash 老是带有一个#号，如localhost:8080/#/这样始终够美观，于是就想着往往his.

Vuejs+vue-router打包+Nginx配置的实例

12-01

Vue.js 是一个流行的前端框架，用于构建用户界面。Vue Router 是 Vue.js 的官方路由库，它使得单页应用（SPA...正确的 Nginx 配置加上 Vue Router 的 history 模式，可以实现优雅的前端路由管理，提供出色的用户体验。

vue-cli history模式实现tomcat部署报404的解决方式

10-16

在Tomcat中部署Vue CLI构建的项目并采用`history`模式时，遇到404错误的主要原因是服务器没有正确地配置来处理这些动态路由。为了解决这个问题，我们需要按照以下步骤进行配置： 1. **打包Vue CLI项目**：使用`...

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

10-16

在路由配置中，我们可以指定使用history模式，并且通过设置base属性来指明项目部署的二级目录路径。例如，在router/index.js文件中，我们可能会看到如下配置： ```javascript export default new VueRouter({ ...

解决vue-cli3 使用子目录部署问题

10-18

总的来说，解决Vue CLI 3子目录部署问题的关键在于正确设置 `vue.config.js` 中的 `baseUrl` 和Nginx配置，以及根据需求选择合适的Vue Router模式。确保这些设置正确无误，你的Vue应用就能顺利地在服务器的任何子...

Vue-cli打包后部署到子目录下的路径问题说明

11-19

默认情况下以当前域名为根目录向下访问。举例，若需要部署到www.***.com/catalog1/catalog2/下，需要更改 1、config/index.js文件中，build下assetsPublicPath属性为’/catalog1/catalog2/’，如下： build: { assetsPublicPath: ‘/catalog1/catalog2/’, 默认情况下该值为’/’（该属性目测是webpack打包时的文件引用路径的基础路径）。 2、修改路由base属性为’/catalog1/catalog2/’,如下： export default new Router({

history 路由且带二级目录的Apache配置

weixin_30568715的博客

11-15

182

有多个项目目录的时候由于项目不知一个，所以不得不为每一个项目建一个专有的文件夹，这就导致了在配置nginx的时候会出现二级目录 - step1: 修改 vue.config.js 添加配置 baseUrl: '/dist/', - step2: 修改 router/index.js------因为多了一层目录因此要在base里添加上 const...

vue-cli4x history模式部署在子目录，以及服务器端的nginx配置

mrhaoxiaojun的博客

04-08

1814

生产环境打包到子目录 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/', outputDir: 'dist/test', assetsDir: 'static', } 路由增加根目录在vue-router配置中增加base属性，声明路由根目录 export d...

Nginx部署多个Vue项目，配置二级域名

04-19

3132

Nginx部署多个Vue项目，配置二级域名

vue中history路由模式下打包后二级多级路由无法访问刷新空白404的问题

青蛙背蝎子过河的博客

12-10

5027

最近写了几个后台,都是用的哈希路由. 前几天写了一个移动端的任务中心. 领导要求需要用history模式的路由.于是踩了一些坑儿. 特地分享给大家. 改为history后遇到了多级路由无法访问的问题, 原因: 我们以前使用哈希路由时, 打包后, 然后访问网址network面板的js文件请求是这样的: http://ap....

vue-router Nginx重定向部署二级域名或者说多级访问的url，导致访问失败

主要领域：前端开发

06-18

1241

如果是/site/wxtest/ nginx.conf配置: location ^~/site/wxtest/ { root /root/www/; try_files $uri $uri/ /site/wxtest/index.html; # index index.html index.htm; }

h5学习笔记：vue 路由部署服务器子目录问题

最新发布

03-24

### Vue History Mode 下 Nginx 配置避免 404 的解决方案当使用 Vue Router 的 `history` 模式时，URL 不再带有 `#` 符号，这使得 URL 更加美观和语义化。然而，在这种模式下，如果用户直接访问某个路径或者刷新页面，服务器会尝试查找对应的文件并返回 404 错误，因为这些路径实际上是由前端路由处理的。为了避免这种情况发生，可以通过配置 Nginx 将未匹配到静态资源的请求重定向回应用入口文件（通常是 `index.html`）。以下是具体的配置方法： #### 修改 Nginx 配置在 Nginx 中，通过设置 `location` 块来捕获所有未找到对应文件的请求，并将其转发给 `index.html` 文件。以下是一个典型的配置示例[^2]： ```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 /404.html; # 可选：自定义错误页 location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { # 处理静态资源缓存策略 expires max; add_header Cache-Control "public, must-revalidate"; } } ``` 上述配置的关键部分在于 `try_files $uri /index.html` 这一行。它告诉 Nginx 对于任何无法映射到具体文件或目录的 URI 请求都应返回 `index.html` 页面，从而让前端框架接管后续的路由逻辑。完成修改之后记得重启 Nginx 来使更改生效： ```bash sudo systemctl restart nginx ``` 另外需要注意的是，如果你的应用运行在一个子路径而非网站根路径上 (比如 http://example.com/myapp/) ，那么还需要调整 Vue 路由的基础路径以及相应地更新 Nginx 设置中的 `root` 和 `location` 参数[^3]。 #### 测试配置有效性为了验证新配置是否正常工作，可以执行如下操作： 1. 构建生产环境下的 Vue 应用 (`npm run build`)； 2. 把构建后的产物上传至指定的服务端位置； 3. 使用浏览器打开任意非首页链接地址进行测试——即使手动输入该网址也应该能够正确显示内容而不是遇到 404 错误。