vue路徑上如何設(shè)置指定的前綴
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í)候的訪(fǎng)問(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í)候的訪(fǎng)問(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和線(xiàn)上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配置，文中通過(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示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關(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)式原理解析，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫(xiě)后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢(xún),下面這篇文章主要給大家介紹了關(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)在線(xiàn)翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線(xiàn)翻譯功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06