【vue】vue-router的base和vue.config.js的publicPath区别和联系:

已于 2023-09-10 11:22:09 修改
阅读量2k 收藏 6
点赞数 1
分类专栏： Vue框架 文章标签： javascript vue.js 开发语言
于 2023-06-08 10:24:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53791978/article/details/131102098
版权

文章目录

一、vue-router中base和vue.config.js中publicPath的联系：

base: process.env.BASE_URL,base设置为process.env.BASE_URL就可以了；官方文档没有关于process.env.BASE_URL的解释；process.env.BASE_URL不用去设置或手动改变

当vue.config.js的publicPath:“/”，process.env.BASE_URL:“/”；

当vue.config.js的publicPath:“/aaa”，process.env.BASE_URL会自动变为:“/aaa/”=>
（1）地址栏：http://localhost:xxx/aaa/xxx；
（2）静态资源：会加上/aaa
在这里插入图片描述

【nginx】在本地部署前端项目:

二、vue-router的base和vue.config.js的publicPath区别和联系

【vue-router的base和vue.config.js的publicPath区别和联系】

【vue-router的base和vue.config.js的publicPath区别和联系】

Sun Peng
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
router.js从'vue-router'导入VueRouter; 导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入...
vue-router的base和vue.config.js的publicPath区别和联系
atu1111的博客
11-17 1万+
vue-router的base和vue.config.js的publicPath区别和联系   vue-router的base官方文档解释： base 类型: string 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"   vue.config.js的publicPath官方文档解释： 1.只设置vue-router的base配置   配置路由基准路径为app,vue.config.js配置文件的publicPath为相对路径
前端 JS 经典：vue 开发中的 base 和 publicPath
最新发布
weixin_64684095的博客
05-27 2014
不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath, 这个两个配置在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
router中的mode和base
qq_40462931的博客
03-07 2985
在vue的路由对象中有两个属性，mode(模式)，base(基路径)。 mode模式有两种模式，vue-router默认是hash模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会进行重新加载。另一种模式就是history模式，而history模式是利用h5 history.pushState API 来完成 URL 跳转，无须重新加载页面。 两种模式下的url地址也是不一样的，在hash模式下，url地址为（http://www.***.com/#/h
react项目 前端加前缀(包括页面及静态资源)
qq_20236937的博客
07-15 6391
react 前端加前缀(包括页面及静态资源)
VUE路由下 mode:‘history‘, base:process.env.BASE_URL的作用
qq_42898184的博客
07-15 1万+
VUE路由下 mode:‘history’, base:process.env.BASE_URL的作用 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 例如： histroy: localhost:8080/user/list hash:
Vue中的baseurl怎么配置
南北极之间
07-19 4396
在main.js中加上这么一句话 axios.defaults.baseURL = ‘http://xxxi.com/’;
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router-keep-alive-helper:Vue.js缓存自动管理插件，自动创建、销毁缓存页面
04-12
Vue路由器保持活动帮助器 Vue Router Keep-alive Helper是用于管理Vue.js项目中的缓存页面的自动工具，只能使用一行配置代码。 English |为什么需要此帮手： 当使用vue-router开发Vue.js的SPA项目时， 总是用于缓存...
微前端qiankun一步步教你做个超级无敌简单吊炸天的小栗子，不会你来打我
陈开心的博客
11-02 1526
微前端从项目搭建到部署，真的很简单
vue cli3.0默认base选项
xdongll的专栏
12-28 3408
1、这是 vue-cli 3 的默认选项，base: ent.BASE_URL 2、需要把 router.js 中的 router base 去掉，上传静态文件到 oss 的 BASE_URL 不应该也应用到 router base
Vue-router 路由详解 多级路由
嘿嘿
05-19 1228
今天我来分享一下vue路由方面的心得体会。 文章源码位置https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base 使用的脚手架为Vue3.0，IDE为VSCode 首先引入vue路由 cnpm install vue-router --save-dev 然后我们在src目录下建立文件夹router,并创建文件index.js 项目大致结构如下 然后我们在view文件夹(新建一个)下创建文件 compan.
VueRouter源码浅析
qq_33203555的博客
09-10 790
路由原理 前端路由原理主要是监听浏览器的url变化来达到根据不同url渲染不同页面的目的。 VueRouter主要有三种实现方式： history模式 hash模式 abstract模式 本文主要讨论hash模式。 使用 先看VueRouter的构造函数 var VueRouter = function VueRouter (options) { if ( options...
关于router里面的base: process.env.BASE_URL 知识分析
weixin_43416349的博客
05-04 1万+
2. base也比较好理解，代表着是基本的路由请求的路径。参考 ：https://router.vuejs.org/zh/api/#base 如： base: '/app/' 那么所有的请求都会在url之后加上/app/ 应用的基路径。例如，如果整个单页应用服务在/app/下，然后base就应该设为"/app/" BASE_URL-这个在vue.config.js 里面有对应的publicPathoption ，同时是你的应用部署的基本路径 ...
vue跨域处理（vue项目中baseUrl设置问题）
热门推荐
weixin_43182021的博客
01-02 4万+
一、方法一 在公用文件common.js中设置baseUrl export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api' 该方法的优点：在项目打包时，static下面的文件是不会被webpack处理的，所以可以通过改变static下config.js中的值，更改服务器地址...
vue-router-keep-alive-helper:Vue.js
05-25
vue-router-keep-alive-helper 是一个 Vue.js 插件，它可以帮助你更方便地使用 Vue Router 中的 keep-alive 组件。通过使用该插件，你可以在组件中更简单地控制缓存和销毁，以及在路由切换时执行相应的生命周期方法。这个插件可以帮助你提高应用性能，尤其是对于频繁切换的页面。 使用该插件非常简单。首先，在你的 Vue.js 项目中安装该插件： ```bash npm install --save vue-router-keep-alive-helper ``` 然后，在你的 Vue.js 应用程序中引入插件，并将其作为 Vue.js 插件使用： ```javascript import Vue from 'vue' import VueRouterKeepAliveHelper from 'vue-router-keep-alive-helper' Vue.use(VueRouterKeepAliveHelper) ``` 完成这些步骤后，你就可以在你的 Vue 组件中使用 keep-alive 组件了。例如，如果你想缓存一个组件，只需要在组件的定义中添加 "keep-alive" 标签： ```html <template> <div> <h1>This component will be cached!</h1> </div> </template> <script> export default { name: 'MyComponent', // Add the "keep-alive" tag to cache this component keepAlive: true, // Your component logic here } </script> ``` 通过使用 vue-router-keep-alive-helper，你可以更方便地控制组件的缓存和销毁，以及在路由切换时执行相应的生命周期方法。这是一个非常实用的 Vue.js 插件，可以帮助提高你的应用程序性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值