開啟~\build\webpack.base.conf.js，找到entry，新增多入口
entry: ,執行、編譯的時候每乙個入口都會對應乙個chunk
開啟~\build\webpack.dev.conf.js，在plugins下找到new htmlwebpackplugin，在其後面新增對應的多頁，並為每個頁面新增chunk配置
plugins:[
// new htmlwebpackplugin(),
new htmlwebpackplugin(),
new htmlwebpackplugin()
]
~\config\index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其後新增多頁
build: ,~\build\webpack.prod.conf.js，在plugins下找到new htmlwebpackplugin，在其後面新增對應的多頁，並為每個頁面新增chunk配置
htmlwebpackplugin中的filename引用的是 config/index.js 中對應的build
plugins: [
new htmlwebpackplugin(,
// necessary to consistently work with multiple chunks via commonschunkplugin
chunkssortmode: 'dependency',
}),new htmlwebpackplugin(,
chunkssortmode: 'dependency',
}),new htmlwebpackplugin(,
chunkssortmode: 'dependency',
}),]
參考:
如果頁面比較多，可以考慮使用迴圈將htmlwebpackplugin新增到plugins
// utils.js
exports.getentry = function(globpath, pathdir) ,
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++)
return entries;
}
// webpack.base.conf.js
var pages = object.keys(utils.getentry('../src/views/**/*.html', '../src/views/'));
pages.foreach(function (pathname) }表示式，所以很多情況下並不需要在此配置壓縮項，
* 另外，uglifyjsplugin會在壓縮**的時候連同html一起壓縮。
* 為避免壓縮html，需要在html-loader上配置'html?-minimize'，見loaders中html-loader的配置。
*/// minify:
};if (pathname in config.entry)
config.plugins.push(new htmlwebpackplugin(conf));
});
同樣入口entry也可以使用
// webpack.base.conf.js
entry: ,
使用Vue CLI3開發多頁面應用
一 安裝vue cli3 1 如果你已經全域性安裝了舊版本的vue cli 1.x 或 2.x 你需要先通過npm uninstall vue cli g或yarn global remove vue cli解除安裝它。2 安裝命令 npm install g vue cli 或 yarn glob...
Vue cli安裝方法和單頁改為多頁應用的記錄
其實把vue腳手架 vue cli 從單頁改為多頁，在網上有很多的教程。大佬請路過 我就做個記錄，以免以後會用到，如果能幫到其他人的更好。不廢話了，進入正題。node安裝好了之後就可搭建vue cli了，在安裝之前先檢查node版本，最好是最新的版本，不然用老版本的話會出現一些意想不到的驚喜。可以 ...
Vue cli 多頁相關配置記錄
搭建乙個順手的mpa專案腳手架，其實根據專案的不同目錄結構和打包配置都可以進行靈活的調整。這次的專案可能是包含各種客戶端和管理後台在一起的綜合專案所以需要將樣式和指令碼做比較好的隔離。許可權驗證可以使用統一的模組，然後每個單獨spa中根據需求再單獨實現資料或者功能許可權的控制。因為專案間的差異可能會...