vue路徑上如何設(shè)置指定的前綴
更新時間：2022年07月26日 14:15:37 作者：Lou_Lan
這篇文章主要介紹了vue路徑上如何設(shè)置指定的前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue路徑上設(shè)置指定的前綴
有時在使用項目的時候，我們都需要指定一個前綴路徑（就像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.
當(dāng)我們使用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模式后部署， 刷新會有問題。需要更改服務(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;
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue中使用typescript配置，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)自動滑動輪播圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了Vue2如何支持composition API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關(guān)于vue3.0中使用element的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家介紹了Vue3的響應(yīng)式原理解析，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟
寫后臺管理的時候會有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
Vue+elementUI?el-input輸入框手機號校驗功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機號校驗功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過實例代碼介紹了對輸入手機號做校驗的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue3基礎(chǔ)組件開發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開發(fā)-detePicker（日期選擇組件）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項目框架的詳細操作方法，需要的跟著學(xué)習(xí)下吧。2017-11-11
vue translate peoject實現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實現(xiàn)在線翻譯功能，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06