詳解vue-cli多頁面工程實(shí)踐第1/2頁
更新時(shí)間：2017年08月30日 09:42:00 作者：水木醬
本篇文章主要介紹了詳解vue-cli多頁面工程實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
本文介紹了vue-cli多頁面工程實(shí)踐，分享給大家，具體如下：
src目錄結(jié)構(gòu)
因?yàn)槭亲远x的設(shè)置，src下的目錄結(jié)構(gòu)需要固定，約定大于配置嘛。
src目錄結(jié)構(gòu)：
src/
components/
modules/ # 多頁面
index/ # index 單頁面
index.html
main.js # 入口文件
page1/
index.html
main.js
group/
page2/
index.html
main.js
build中的配置
utils.js 增加:
// match files
let glob = require('glob');
/**
* globPath 獲取泛路徑下的特定文件
*/
exports.getEntities = function (path) {
let entities = {};
glob.sync(path).forEach(function (entity) {
let moduleName = entity.split('/').slice(-2,-1);
entities[moduleName] = entity
});
// eg: { main: './src/module/index/main.js', test: './src/module/group/test/main.js' }
return entities;
};
webpack.base.conf.js 修改輸入和輸出:
module.exports = {
// 遍歷獲取入口文件
entry: utils.getEntities("./src/modules/**/main.js"),
...
plugins:[]
};
/***
* 生成 <module>/index.html
*/
let utils = require('./utils')
let pages = utils.getEntities("./src/modules/**/index.html");
for (let page in pages) {
let filename = "index.html";
if(page!=='index'){
filename = page+"/index.html";
}
module.exports.plugins.push(new HtmlWebpackPlugin({
filename: filename,
template: pages
您可能感興趣的文章:- vue cli 3.x 項(xiàng)目部署到 github pages的方法
- Vue-cli創(chuàng)建項(xiàng)目從單頁面到多頁面的方法
- 詳解vue-cli + webpack 多頁面實(shí)例配置優(yōu)化方法
- vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼
- 詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
- 詳解vue-cli + webpack 多頁面實(shí)例應(yīng)用
- vue-cli創(chuàng)建的項(xiàng)目,配置多頁面的實(shí)現(xiàn)方法
- 基于vue cli重構(gòu)多頁面腳手架過程詳解
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
相關(guān)文章
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了vuex與組件聯(lián)合使用的方法,需要的朋友可以參考下2018-05-05
vue使用@scroll監(jiān)聽滾動事件時(shí)，@scroll無效問題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動事件時(shí)，@scroll無效問題的解決方法,結(jié)合實(shí)例形式分析了@scroll監(jiān)聽滾動事件無效問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue中復(fù)用vuex.store對象的定義，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中動態(tài)組件使用及傳值方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue頁面渲染中key的應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
在現(xiàn)代前端開發(fā)中,CSS 預(yù)處理器如 Sass、Less 和 Stylus 等工具,為樣式編寫提供了更強(qiáng)大的功能和更好的開發(fā)體驗(yàn),本文將探討 Vite 是如何處理 CSS 預(yù)處理器的,以及如何在實(shí)際項(xiàng)目中配置和使用它們,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
使用vue-antDesign menu頁面方式(添加面包屑跳轉(zhuǎn))
這篇文章主要介紹了使用vue-antDesign menu頁面方式(添加面包屑跳轉(zhuǎn)),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
本文主要探討了網(wǎng)頁刷新時(shí),原本隱藏的元素會一閃而過的問題,以及嘗試過的解決方案并未奏效,通過實(shí)例代碼介紹了如何處理?Vue3?中隱藏元素刷新閃爍問題,感興趣的朋友跟隨小編一起看看吧2024-10-10