1. 程式人生 > 程式設計 >Vue-cli打包後部署到子目錄下的路徑問題說明

Vue-cli打包後部署到子目錄下的路徑問題說明

預設情況下以當前域名為根目錄向下訪問。

舉例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改

1、config/index.js檔案中,build下assetsPublicPath屬性為'/catalog1/catalog2/',如下:

build: {

assetsPublicPath: '/catalog1/catalog2/',

預設情況下該值為'/'(該屬性目測是webpack打包時的檔案引用路徑的基礎路徑)。

2、修改路由base屬性為'/catalog1/catalog2/',如下:

export default new Router({
 mode: 'history',base: '/catalog1/catalog2/',routes: [
 {
 path: '/',name: 'indexContent',component: indexContent
 }
 ]
})

其中mode設定為'history'可清除路徑中的#(本地測試有效)。

設定完成後重新打包。

補充知識:vue-cli打包並配合nginx域名二級子目錄

可以修改三個配置

1.路由

const route = new Router({
mode : 'history',base: '/admin/',routes:[]
})

2.打包檔案 config/index.js

build設定

assetsPublicPath: '/admin/',

3.nginx配置

try_files $uri $uri/ /admin/index.html;

4.專案目錄配置例項

專案路徑 web/admin/index.html

以上這篇Vue-cli打包後部署到子目錄下的路徑問題說明就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。