vue-router 配置根路径， publicPath & base

原创 已于 2022-11-22 13:54:38 修改 · 5.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2020-06-18 19:09:13 首次发布
本文介绍如何在Vue项目中配置publicPath和router.base属性，确保应用在子路径下正确运行，适用于部署到非根目录的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue.config.js

  1. 配置 publicPath

    module.exports = {
  publicPath: 'portal'
}

  2. router

    base: '/portal',
mode: 'history' // hash 都可以
vue-router四版本-适用vue3
weixin_68658847的博客
04-10 4871
vue-router四版本-适用vue3
VUE3 学习笔记（11）：vue-router路由要懂的知识点
众纳百川的博客
06-03 568
在前后端没有分离之前，大家通常采用的MVC模式，由后端通过Controller层实现页面跳转，VUE是组件化的特点，说白了就是一个单页面应用（挂载在public/index.html），意味着所有的页面只是各组件的组合。那么控制这些组合就无法通过传统方式进行控制了。VUE 提供了路由配置vue-router进行处理，本文将着重介绍它的使用。
vue-router路径
chenyongzhi1218的专栏
11-26 1452
vue-router默认路径 默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容. 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以。 如何可以让路径默认跳到到首页, 并且渲染首页组件呢? 非常简单, 我们只需要配置多配置一个映射就可以了。 配置解析: 我们在routes中又配置了一个映射。 path配置的是根路径: / redi...
vuerouter获取当前路径_VueRouter
weixin_32390279的博客
01-12 4122
一、VueRouter---基本使用1.什么是Vue Router?Vue Router和v-if/v-show一样, 是用来切换组件的显示的v-if/v-show是标记来切换(true/false)Vue Router用哈希来切换(#/xxx)比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数2.Vue Router使用 2.1导入Vue ...
vue中设置中公共路由和根据权限添加的路由
Rocky balboa
04-17 1668
/* publicRoutes 默认公共路由，不需要权限的路由 roleRoutes 根据权限添加的路由，添加规则如下 1、没有meta标签的代表所有权限都可以访问 有meta标签的，根据role数组，例如下面 meta: { role: ['a', 'b'] }, 代表只有a，b两个权限的人可以访问 */ 公共路由 // 公共路由 let publicRoutes = [{ path: '/login',
随笔集：vue Router的动态路由路径配置及路由守卫
JOB_TD的博客
01-08 974
vue Router的动态路由路径配置及路由守卫 vue Router 是 vue官方提供的路由管理器，就是你在地址栏输入什么地址就跳到相对应的页面里去。 动态路由路径 下面是刚新建的router.js内容： import Vue from 'vue' //引入的vue对象 import Router from 'vue-router' //引入router对象 import HelloWorld from '@/components/HelloWorld' //引入页面 Vue.use(Router
vue中如何获取public路径
最新发布
hantanxin的专栏
11-29 3877
在Vue项目中获取public路径有多种方法可供选择。1、使用相对路径适用于简单项目，2、使用环境变量适用于需要在不同环境中配置路径的项目，3、使用webpack配置则适用于需要根据构建环境动态调整路径的复杂项目。根据项目需求选择合适的方法，可以提高项目的灵活性和可维护性。建议在实际项目中，根据具体需求选择合适的方法。如果项目较为简单，使用相对路径即可满足需求；如果需要在不同环境中使用不同路径，推荐使用环境变量；而对于需要动态调整路径的复杂项目，可以考虑使用webpack配置。
03路由 vue在根路径下实现页面布局
努力学习中
10-18 681
1：routes下面的path匹配根路径，components可以对应多个组件名。 根据里面设置name，在组件中根据name写组件名称，可根据class添加样式。 <style> *{ margin: 0; padding: 0; } .head{ margin: 5px; height: 10...
vue-router(3.5.1)源码梳理
Caristop3_走在前端这条大道上
04-09 3304
如何理解vue-router源码？ vue-router 源码分析 date: 2021-03-26 1. import Vue VueRouter 进来 2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”
mpvue项目中使用vue-router
pamerely的博客
11-03 1067
mpvue项目只用vue-router vue项目都是使用vue-router的路由跳转，而小程序中是不能使用vue-router，这时候就需要一些插件要完成在mpvue中使用vue-router. mpvue-entry mpvue-entry：集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面的热更新。 mpvue-router-path 在mpvue中使用vue-router兼容路由写法，npm地址：https://www.npmjs.com/package/mpvue-router
vue-router+nginx 非根路径配置方法
09-04
在使用 Vue Router 时，如果我们的应用需要在部署时不是根路径，而是一个非根路径下运行，可以通过以下步骤进行配置。 首先，在项目的 `vue.config.js` 文件中进行配置。如果没有该文件，可以在项目根目录下创建，...
Vue的router详解
热门推荐
Litt_White的博客
08-20 1万+
vue-router参数配置，vue-router的相对路径和绝对路径，带/和不带/的区别，vue-router路由的嵌套使用，vue-router的路由传参，keep-alive的使用，vue-router动态添加路由，删除路由，vue-router导航守卫的使用
多个Vue项目如何配置nginx
qq_45472813的博客
03-14 1264
环境基于window,文件中的配置路径为绝对路径。window中配置nginx，路径要使用//代替\ 业务需求：一个服务器运行两个vue项目，并且要求端口号必须是一致的。 实现效果：http://localhost:8080/，http://localhost:8080/screen。 一，Vue路由Hash模式配置nginx 路径为/访问项目配置： 将Vue-router插件中基础路径选项base设置为/。 router/index.js const router = new VueRouter({ .
Vue-Router
weixin_45845391的博客
01-14 1333
当定义像 :userId 这样的参数时，我们内部使用以下的正则 ([^/]+) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用，除非你需要根据参数的内容来区分两个路由。想象一下，两个路由 /:orderId 和 /:productName，两者会匹配完全相同的 URL，所以我们需要一种方法来区分它们。const routes = [ // 匹配 /o/3549 {path : '/o/:orderId' } , // 匹配 /p/books {
vue把请求根路径配置在public文件中，打包后可随时修改根路径
vhgvhbj的博客
04-26 3141
vue把请求根路径配置在public文件中，打包后可随时修改根路径
Vue-router配置公共头部、尾部
weixin_42080056的博客
09-26 1832
近半年一直在写react，但对Vue的热爱种种不能忘怀，这不昨天群里有小伙伴问到了关于vue-router的一些问题，于是我自己又搭建了一遍，突然就想到了一个问题，今天分享给大家。 相信很多大神在搭建框架的时候都遇到过一个问题，拿PC来说，一般头部都是公共的，你是如何处理？单写一个template作为公共模板？各个页面引用？还是直接在App.vue里面构建出公共的头部和底部，导航用router来......
webpack优化系列三：vue子目录路径更改---publicPath
hyduan_h5的博客
07-01 3265
vue子目录路径更改
Vue Router(一)：起步
ArthurWang77的博客
04-26 312
我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们 创建路由的步骤 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)； 定义 (路由) 组件，或者从其他地方import； 定义路由——每个路由应该映射一个组件； 创建 router 实例，然后传 routes 配置；...
nginx部署vue-router history 模式时报 404 nginx try_files 文件路径详解和 vue.config.js中publicPath的作用
王森的博客
08-31 1494
try_files 的路径解析： 在 try_files 指令中，文件路径可以是相对路径（相对于 root 或 alias 指定的路径）或绝对路径（相对于服务器根目录）。 当路径以斜杠 / 开头时，被视为绝对路径。否则，会相对于 root 或 alias 的路径进行解析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值