vue cli ts iview單多頁面的配置實踐

2021-09-24 13:01:46 字數 3190 閱讀 4266

npm i
npm run serve
是單頁面的類似後台管理的頁面，同時這個系統配置了多頁面的

是乙個醜陋的首頁

建立專案：vue create hello-world

安裝 less：npm install -d less-loader less

安裝 ts：vue add @vue-typescript，可選用 vue-property-decorator

安裝 babel：vue add @vue/cli-plugin-babel

const path =


require


('path');


const glob =


require


('glob');


const title =


'測試頁面'


;const


addstyleresource


= rule =>);


};const


getpages=(


)=>


;  glob.


sync


('./src/page/**/*.[jt]s?(x)').


foreach


(item =>


.html`


,      filename:`$


`,chunks:


['common'


, filename]


,      chunkssortmode:


'manual'


,      inject:


true};


});return pages;};


module.exports =}}


,  chainwebpack: config =>))


;// 壓縮


config.module


.rule


('images').


use(


'image-webpack-loader').


loader


('image-webpack-loader').


options()


.end()


;// 每個單檔案元件和less檔案中匯入config.less


const types =


['vue-modules'


,'vue'


,'normal-modules'


,'normal'];


types.


foreach


(type =>


addstyleresource


(config.module.


rule


('less').


oneof


(type)))


;// 加入ts


config.module.


rule


('ts').


use(


'babel-loader');


// 移動端 px2rem-loader


config.module


.rule


('less').


oneof


('normal').


use(


'px2rem-loader').


loader


('px2rem-loader').


before


('postcss-loader').


options()


.end()


;},  css:


,      postcss:}}


,// 配置webpack-dev-server


devserver:


/$/`;


//     next('route');


//   } else 


// });}}


,// 構建時開啟多程序處理 babel 編譯


parallel:


require


('os').


cpus()


.length >1}


;
多頁面配置一直失敗，filename 的路徑一直訪問不到，原因是 publicpath 寫成了相對路徑./，改為預設的/即可

檢視內建配置項的具體配置 vue inspect --rule 要查詢的 rule

css 無法載入出背景，在配置 url-loader 中加入 publicpath: '…/…/'即可

ts 沒有識別全域性定義的 t，在 shims-tsx.d.ds 中加入

declare global 


}
在配置裡加了 router 的 alias，但是會報錯@router 沒有定義，在 tsconfig.js 加入

"paths"


:,
iview 的 icon 沒有生效，修改 vue.config.js 中的 css:，但是會使 css 在頁面內聯 style

加入 row、col 元件 eslint 報錯，原因是渲染成 html 標籤本身是閉合標籤和 iview 標籤不匹配，所以在.eslintrc 關閉該條匹配

"rules"


:
路由傳參不起作用，配置路由時加上

props:


,
將單頁面的#去掉，讓路由表現得像多頁面，在例項化 router 時加入 mode：history，但是重新整理後巢狀路由中的東西會失效，當前的做法是定義乙個獲取導航欄的 map，然後在 topmenu 和 sidemenu 中迴圈獲取當前的一級導航和二級導航列表

const router =


newvuerouter()


;
在切換一級導航時，二級導航的列表沒有切換，原因是 route 變化了但是列表沒有及時更新，所以在 watch 中監聽$route，有變化了就及時更新列表

watch:},


mounted()


,

單網絡卡多網路

需求 有幾個業務的系統在機房。我自己的電腦經樓層交換機在辦公室。業務系統裡面有獨立的區域網。我想在我辦公室的電腦裡面直接管理這個幾個業務系統。我電腦所在網路與業務系統自身網路相互獨立，且沒有任何物理連線。我也無法將業務系統的網路接入到辦公網路的核心交換機上 我也不想這麼幹 有乙個有利的優勢是，機房跟...

單頁面多頁面區別

單頁面與多頁面的區別 單頁面多頁面 組成 有乙個主要頁面和其他片段頁面組成 由多個完整頁面組成 css js公用載入 每個頁面都分開載入 url模式 a.com pageone a.com pagetwo url模式 a.com pageone.html a.com pagetwo.html 重新整...

python 單繼承，多繼承

父類 class person def init self,name,age self.name name self.self.age age def introduce self print 父類方法person self.name 學生類 繼承 person class student pers...