Vue-cli打包后部署到子目錄下的路徑問(wèn)題說(shuō)明
默認(rèn)情況下以當(dāng)前域名為根目錄向下訪問(wèn)。
舉例，若需要部署到www.***.com/catalog1/catalog2/下，需要更改
1、config/index.js文件中，build下assetsPublicPath屬性為'/catalog1/catalog2/'，如下：
build: {
assetsPublicPath: '/catalog1/catalog2/',
默認(rèn)情況下該值為'/'（該屬性目測(cè)是webpack打包時(shí)的文件引用路徑的基礎(chǔ)路徑）。
2、修改路由base屬性為'/catalog1/catalog2/',如下：
export default new Router({
mode: 'history',
base: '/catalog1/catalog2/',
routes: [
{
path: '/',
name: 'indexContent',
component: indexContent
}
]
})
其中mode設(shè)置為'history'可清除路徑中的#（本地測(cè)試有效）。
設(shè)置完成后重新打包。
補(bǔ)充知識(shí)：vue-cli打包并配合nginx域名二級(jí)子目錄
可以修改三個(gè)配置
1.路由
const route = new Router({
mode : 'history',
base: '/admin/',
routes:[]
})
2.打包文件 config/index.js
build設(shè)置
assetsPublicPath: '/admin/',
3.nginx配置
try_files $uri $uri/ /admin/index.html;
4.項(xiàng)目目錄配置實(shí)例
項(xiàng)目路徑 web/admin/index.html
以上這篇Vue-cli打包后部署到子目錄下的路徑問(wèn)題說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例
本篇文章主要介紹了vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-10-10
vue-quill-editor+plupload富文本編輯器實(shí)例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實(shí)例詳解,需要的朋友可以參考下2018-10-10
這篇文章介紹了Vue中的event對(duì)象，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮
在前端開(kāi)發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁(yè)面上,同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過(guò)Vue指令實(shí)現(xiàn)了這個(gè)功能,需要的朋友可以參考下2023-09-09
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語(yǔ)法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡(jiǎn)單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過(guò)示例代碼講解感興趣的朋友一起看看吧2023-08-08
TinyMCE 是一款功能強(qiáng)大的富文本編輯器,廣泛應(yīng)用于各種 Web 應(yīng)用中,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中集成 TinyMCE,通過(guò)詳盡的步驟說(shuō)明、示例代碼展示以及豐富的配置選項(xiàng),助力開(kāi)發(fā)者輕松實(shí)現(xiàn)內(nèi)容編輯的增強(qiáng)與美化,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue中如何配置proxy代理問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue方法與事件處理器，,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12