vue路徑上如何設(shè)置指定的前綴

更新時(shí)間：2022年07月26日 14:15:37 作者：Lou_Lan

這篇文章主要介紹了vue路徑上如何設(shè)置指定的前綴，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue路徑上設(shè)置指定的前綴

有時(shí)在使用項(xiàng)目的時(shí)候，我們都需要指定一個(gè)前綴路徑（就像tomcat中的虛擬路徑），這個(gè)時(shí)候在vue中如何使用呢。

解決

這個(gè)時(shí)候我們可以使用vue-router中的base這個(gè)屬性，使用這個(gè)屬性就可以在路徑前面添加指定的前綴。

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

這個(gè)時(shí)候的訪問(wèn)路徑是： http://127.0.0.1:8080/login.

當(dāng)我們使用vue-router的base屬性的時(shí)候。

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

這個(gè)時(shí)候的訪問(wèn)路徑是： http://127.0.0.1:8080/wtlicence/login

vue history模式、前綴

路由history模式

router/index.js

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

路由前綴

config/index.js

開(kāi)發(fā)dev和線上build配置中，將static改成想要的前綴。

assetsSubDirectory: 打包后的靜態(tài)資源要存放的路徑（static）

最后，改成history模式后部署，刷新會(huì)有問(wèn)題。需要更改服務(wù)器配置（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;
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中使用typescript配置步驟
本文主要介紹了vue中使用typescript配置，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue2如何支持composition API示例詳解
這篇文章主要為大家介紹了Vue2如何支持composition API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
vue3.0中使用element的完整步驟
這篇文章主要給大家介紹了關(guān)于vue3.0中使用element的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
詳解Vue3的響應(yīng)式原理解析
這篇文章主要為大家介紹了Vue3的響應(yīng)式原理解析，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫(xiě)后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過(guò)實(shí)例代碼介紹了對(duì)輸入手機(jī)號(hào)做校驗(yàn)的方法,感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue3基礎(chǔ)組件開(kāi)發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開(kāi)發(fā)-detePicker（日期選擇組件）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue2.x+webpack快速搭建前端項(xiàng)目框架詳解
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項(xiàng)目框架的詳細(xì)操作方法，需要的跟著學(xué)習(xí)下吧。
2017-11-11
vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06