vue路徑上如何設置指定的前綴
更新時間：2022年07月26日 14:15:37 作者：Lou_Lan
這篇文章主要介紹了vue路徑上如何設置指定的前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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
開發(fā)dev和線上build配置中，將static改成想要的前綴。
assetsSubDirectory: 打包后的靜態(tài)資源要存放的路徑（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;
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue之數(shù)據(jù)交互實例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實現(xiàn)向服務器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue 界面在蘋果手機上滑動點擊事件等卡頓解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue2.x,vue3.x使用provide/inject注入的區(qū)別說明
這篇文章主要介紹了vue2.x,vue3.x使用provide/inject注入的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
混淆是一種有效的保護措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進行還原,感興趣的可以了解一下2023-12-12
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)備忘錄的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
vue等框架對Tabs、Moda等設置固定高度后沒有滾動條問題
這篇文章主要介紹了vue等框架對Tabs、Moda等設置固定高度后沒有滾動條問題,解決方法很簡單，只需要一行簡短代碼就可以解決，下面小編給大家詳細講解，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue如何把字符串中的所有@內(nèi)容,替換成帶標簽的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10