广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue路径上如何设置指定的前缀
  • 833
分享到

vue路径上如何设置指定的前缀

2024-04-02 19:04:59 833人浏览 安东尼
摘要

目录Vue路径上设置指定的前缀解决vue history模式、前缀路由history模式路由前缀vue路径上设置指定的前缀 有时在使用项目的时候,我们都需要指定一个前缀路径(就像To

vue路径上设置指定的前缀

有时在使用项目的时候,我们都需要指定一个前缀路径(就像Tomcat中的虚拟路径),这个时候在vue中如何使用呢。

解决

这个时候我们可以使用vue-router中的base这个属性,使用这个属性就可以在路径前面添加指定的前缀。

export default new Router({
  mode: 'history', //后端支持可开
  # base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

这个时候的访问路径是: Http://127.0.0.1:8080/login.

当我们使用vue-router的base属性的时候。

export default new Router({
  mode: 'history', //后端支持可开
  base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

这个时候的访问路径是: http://127.0.0.1:8080/wtlicence/login

vue history模式、前缀

路由history模式

router/index.js

mode: 'history',
base: '/sss', // 路由前缀

路由前缀

config/index.js

开发dev和线上build配置中,将static改成想要的前缀。

  • assetsSubDirectory: 打包后的静态资源要存放的路径(static)

最后,改成history模式后部署, 刷新会有问题。需要更改服务器配置(config)

server{
	listen      8888;
	server_name  localhost;
	root html
	location / { 
	    try_files $uri $uri/ @router; 
	    index index.html index.htm; 
	}
	location @router { 
		rewrite ^.*$ /index.html last; 
	}
}

新增的主要是:

location / {
try_files $uri KaTeX parse error: Expected 'EOF', Got '}' at position 51: …l index.htm; }̲ location @rou… /index.html last;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue路径上如何设置指定的前缀

本文链接: https://www.lsjlt.com/news/165270.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue路径上如何设置指定的前缀
    目录vue路径上设置指定的前缀解决vue history模式、前缀路由history模式路由前缀vue路径上设置指定的前缀 有时在使用项目的时候,我们都需要指定一个前缀路径(就像to...
    99+
    2022-11-13
  • Angular项目路径如何添加指定的访问前缀
    这篇文章主要介绍了Angular项目路径如何添加指定的访问前缀的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Angular项目路径如何添加指定的访问前缀文章都会有所收获,下面我们一起来看看吧。开发多个项目的时候...
    99+
    2023-07-05
  • Angular 项目路径添加指定的访问前缀
    目录前言更改项目前缀部署项目前言 开发多个项目的时候,我们希望能通过指定的前缀路径去访问不同的项目。比如,通过前缀 /projectA/ 去访问项目 A;通过前缀 /project...
    99+
    2023-03-03
    Angular 路径访问前缀 Angular 路径指定前缀
  • Angular项目中如何给路径添加指定访问前缀
    这篇“Angular项目中如何给路径添加指定访问前缀”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Angular项目中如何给...
    99+
    2023-07-05
  • Next项目路径怎么添加指定的访问前缀
    这篇文章主要讲解了“Next项目路径怎么添加指定的访问前缀”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Next项目路径怎么添加指定的访问前缀”吧!更改项目前缀假设我们添加的前缀为 /jim...
    99+
    2023-07-05
  • Next项目路径添加指定的访问前缀方法详解
    目录前言更改项目前缀部署项目前言 开发多个项目的时候,我们希望能通过指定的前缀路径去访问不同的项目。比如,通过前缀 /projectA/ 去访问项目 ...
    99+
    2023-03-06
    Next 路径指定访问前缀 Next 路径前缀
  • vue相对路径与路径别名如何设置
    这篇文章主要介绍“vue相对路径与路径别名如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue相对路径与路径别名如何设置”文章能帮助大家解决问题。@ ~ 相对路径 路径别名设置./这是相对路...
    99+
    2023-06-30
  • 如何在 Windows 上设置 Laravel 的路径?
    在 Windows 上使用 Laravel 开发应用程序是一件非常方便的事情,但是在开始开发之前,你需要先设置 Laravel 的路径。这篇文章将会告诉你如何在 Windows 上设置 Laravel 的路径,以便你可以轻松地开始你的 La...
    99+
    2023-09-27
    windows laravel path
  • Redis如何删除1.2亿指定前缀的key
    这篇文章主要为大家展示了“Redis如何删除1.2亿指定前缀的key”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Redis如何删除1.2亿指定前缀的key”这...
    99+
    2022-10-19
  • vue为自定义路径设置别名的方法
    Vue中如何配置自定义路径别名 在我们日常开发中,常常会导入一些模块或者组件,如果采用相对路径的方式: import uEditor from "../../../../../c...
    99+
    2022-11-12
  • 你会如何在 Windows 上设置 Laravel 的路径?
    在 Windows 上设置 Laravel 的路径是 Laravel 开发者必须掌握的技能之一。Laravel 是一款流行的 PHP 开发框架,它能够帮助我们更快速、更高效地开发 Web 应用程序。在这篇文章中,我们将会讨论如何在 Wind...
    99+
    2023-09-27
    windows laravel path
  • 如何在Linux上设置Go语言的路径?
    在Linux上设置Go语言的路径是一个非常重要的步骤,因为它将使你能够使用Go语言编写并运行程序。在这篇文章中,我们将学习如何在Linux操作系统中设置Go语言的路径。 首先,你需要下载并安装Go语言。你可以从官方网站https://gol...
    99+
    2023-07-05
    path 学习笔记 linux
  • 如何在 Linux 上设置 go 存储路径?
    在 Linux 操作系统上,设置 Go 存储路径是一个很重要的任务。Go 语言的包管理工具需要能够找到正确的存储路径,以便正确地编译和运行您的代码。在本文中,我们将介绍如何在 Linux 上设置 Go 存储路径。 第一步:安装 Go 在设置...
    99+
    2023-07-23
    linux path 存储
  • Nginx如何根据前缀路径转发到不同的Flask服务
    目录开端解决一(设置SCRIPT_NAME)解决二(设置头部X-Forwarded-Prefix再用ProxyFix调整WSGI环境)两种解决的区别nginx proxy_pass配...
    99+
    2023-01-06
    Nginx前缀路径 前缀路径转发Flask服务 Nginx前缀路径转发
  • win7无法访问指定设备路径如何解决
    要解决Windows 7无法访问指定设备路径的问题,可以尝试以下方法:1. 检查设备连接:确保设备已正确连接到计算机,并且设备驱动程...
    99+
    2023-09-09
    win7
  • vue如何设置文件引用路径别名
    这篇文章主要为大家展示了“vue如何设置文件引用路径别名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何设置文件引用路径别名”这篇文章吧。设置文件引用路...
    99+
    2022-10-19
  • Nginx中虚拟主机与指定访问路径的设置方法
    这篇文章主要介绍“Nginx中虚拟主机与指定访问路径的设置方法”,在日常操作中,相信很多人在Nginx中虚拟主机与指定访问路径的设置方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Nginx中虚拟主机与指定...
    99+
    2023-06-05
  • pip install如何指定包的安装路径
    目录pip install指定安装目录改变pip的安装路径dist-packages和site-packages区别总结pip install指定安装目录 pip install一般...
    99+
    2022-11-11
  • php如何设置cookie的有效路径
    这篇文章主要讲解了“php如何设置cookie的有效路径”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何设置cookie的有效路径”吧!PHP是一种广泛使用的服务器端语言,它提供了一...
    99+
    2023-07-05
  • Windows 系统下如何设置 Laravel 的路径?
    Laravel 是一个流行的 PHP 框架,它能够帮助开发者快速构建出高质量的 Web 应用程序。在 Windows 系统下,设置 Laravel 的路径是必不可少的一步。本文将会教你如何在 Windows 系统下设置 Laravel 的路...
    99+
    2023-09-27
    windows laravel path
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作