詳解webpack編譯多頁(yè)面vue項(xiàng)目的配置問(wèn)題
本文主要介紹了webpack編譯多頁(yè)面vue項(xiàng)目的配置問(wèn)題,分享給大家,具體如下:
一般情況下,構(gòu)建一個(gè)vue項(xiàng)目的步驟為:
1,安裝nodejs環(huán)境
2,安裝vue-cli
cnpm install vue-cli -g
3,構(gòu)建vue項(xiàng)目
vue init webpack-simple vue-cli-multipage-demo
4, 安裝項(xiàng)目依賴(lài)包
cnpm install
5,在開(kāi)發(fā)環(huán)境下運(yùn)行該項(xiàng)目:
npm run dev
通過(guò)上面這幾步一個(gè)簡(jiǎn)單的vue項(xiàng)目的開(kāi)發(fā)環(huán)境基本就搭建起來(lái),接下來(lái)的工作就是填代碼了。
最近在做一個(gè)前端代碼重構(gòu)的時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題,使用這個(gè)腳手架構(gòu)建的項(xiàng)目滿(mǎn)足不了我的需求,其實(shí)這個(gè)需求有一點(diǎn)違背我們vue的初衷的,vue開(kāi)發(fā)的是單頁(yè)面應(yīng)用(SPA),這里我需要他實(shí)現(xiàn)多頁(yè)面的效果。什么意思呢?舉個(gè)例子:我們?cè)诰W(wǎng)頁(yè)開(kāi)發(fā)的時(shí)候,有時(shí)候點(diǎn)擊一個(gè)連接,瀏覽器會(huì)新代開(kāi)一個(gè)tab頁(yè)來(lái)顯示我們的內(nèi)容,這個(gè)時(shí)候其實(shí)就出現(xiàn)多頁(yè)面的情況了,新開(kāi)的這個(gè)頁(yè)面其實(shí)已經(jīng)不屬于我們之前的那個(gè)頁(yè)面,(SPA)其實(shí)是通過(guò)路由的方式,讓多個(gè)頁(yè)面在主頁(yè)面中顯示。但是這個(gè)時(shí)候新開(kāi)的頁(yè)面已經(jīng)脫離主頁(yè)面了。
通過(guò)vue-cli腳手架構(gòu)建的項(xiàng)目的webpack配置文件支持單頁(yè)面的應(yīng)用開(kāi)發(fā),他只有一個(gè)入口文件。而且最后只會(huì)生產(chǎn)一個(gè)頁(yè)面。如何才能滿(mǎn)足我的需求,讓webpack同時(shí)便于多個(gè)頁(yè)面呢,其實(shí)還是比較簡(jiǎn)單的,只需要將webpack稍微改裝一下,就完全可以了。
首先我們需要在build文件下的utils.js文件家中增加一個(gè)獲取文件夾中文件路徑的方法,這個(gè)方法將目標(biāo)文件解析成對(duì)象的形式。
utils.js
var glob = require("glob");//分析文件夾中文件路徑的第三方模塊 exports.getEntry = function(globPath) { var entries = {}, basename, tmp, pathname; if (typeof (globPath) != "object") { globPath = [globPath] } globPath.forEach((itemPath) => { glob.sync(itemPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); if (entry.split('/').length > 4) { tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; } else { entries[basename] = entry; } }); }); return entries; }
然后修改wenpack.base.conf.js文件,修改入口文件,原來(lái)的文件是單文件,現(xiàn)在需要將單文件入口改成多文件入口了。
webpack.dev.conf.js
var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname, '../') var glob = require('glob'); var entries = utils.getEntry(['./src/module/**/*.js']); // 獲得多頁(yè)面的入口js文件 var env = process.env.NODE_ENV // various preprocessor loaders added to vue-loader at the end of this file var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) var useCssSourceMap = cssSourceMapDev || cssSourceMapProd module.exports = { entry: entries,//這是通過(guò)前面新增的方法獲取的文件路徑對(duì)象 output: { path: config.build.assetsRoot, publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, filename: '[name].js' } ... }
下面需要修改webpack.dev,conf.js文件了,這里主要是修改原來(lái)配置的首頁(yè),這里需要配置多個(gè)頁(yè)面
webpack.dev.conf.js
var path = require('path'); var config = require('../config') var webpack = require('webpack') var merge = require('webpack-merge') var utils = require('./utils') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) module.exports = merge(baseWebpackConfig, { ... }); //新增 var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']); for (var pathname in pages) { // 配置生成的html文件,定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 inject: true, // js插入位置 chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }
這里這要是改變了new HtmlWebpackPlugin的conf對(duì)象,原來(lái)的配置的是單個(gè)html,現(xiàn)在通過(guò)循環(huán)pages對(duì)象,生成多個(gè)html配置對(duì)象。
通過(guò)上面的配置,當(dāng)我們執(zhí)行npm run dev 的時(shí)候,webpack就可以同時(shí)便于多個(gè)頁(yè)面,然后將前面wenpack.base.conf.js中配置的js文件,插入到對(duì)應(yīng)的html頁(yè)面中。
這個(gè)時(shí)候我們運(yùn)行項(xiàng)目npm run dev 然后我們就可以訪(fǎng)問(wèn)不同的頁(yè)面了,這里需要注意一下,既然我們需要管理多個(gè)頁(yè)面,我們就應(yīng)該在src下建立一個(gè)目錄專(zhuān)門(mén)來(lái)訪(fǎng)放不同的頁(yè)面。這樣項(xiàng)目結(jié)構(gòu)看起來(lái)更加清晰,便于維護(hù)。
這是我寫(xiě)的一個(gè)demo地址,有興趣的可以拉下來(lái)看看vue-cli-multi-page
運(yùn)行起來(lái)后訪(fǎng)問(wèn)http://localhost:8080/module/index.html,然后點(diǎn)擊按鈕,打開(kāi)新頁(yè)面。
上面這樣配置只是開(kāi)發(fā)環(huán)境,最后生產(chǎn)環(huán)境的配置文件webpack.prod.conf.js也需要修改,這樣在生產(chǎn)打包的時(shí)候就可以同時(shí)在dist中生成多個(gè)html文件。
webpack.prod.conf:
var path = require('path') var config = require('../config') var utils = require('./utils') var webpack = require('webpack') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var CleanPlugin = require('clean-webpack-plugin')//webpack插件,用于清除目錄文件 var env = config.build.env var webpackConfig = merge(baseWebpackConfig, { ... } //這里是修改的部分,和webpack.dev.conf.js的修改是一樣的 module.exports = webpackConfig var pages =utils.getEntry(['./src/module/**/*.html']); for (var pathname in pages) { // 配置生成的html文件,定義路徑等 var conf = { filename: pathname + '.html',//生成 html 文件的文件名 template: pages[pathname], // 根據(jù)自己的指定的模板文件來(lái)生成特定的 html 文件。這里的模板類(lèi)型可以是任意你喜歡的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定義的模板文件時(shí),需要提前安裝對(duì)應(yīng)的 loader, inject: true, // 注入選項(xiàng)。有四個(gè)選項(xiàng)值 true, body, head, false.true:默認(rèn)值,script標(biāo)簽位于html文件的 body 底部,body:同 true,head:script 標(biāo)簽位于 head 標(biāo)簽內(nèi),false:不插入生成的 js 文件,只是單純的生成一個(gè) html 文件 // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }
以上就是使用vue-cli腳手架來(lái)解決vue多頁(yè)面開(kāi)發(fā)的解決方案,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
這篇文章主要介紹了vue2+elementUI的el-tree的選中、高亮、定位功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12Vue開(kāi)發(fā)配置tsconfig.json文件的實(shí)現(xiàn)
tsconfig.json文件中指定了用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng),本文就來(lái)介紹一下Vue開(kāi)發(fā)配置tsconfig.json文件的實(shí)現(xiàn),感興趣的可以了解一下2023-08-08vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例
本篇文章主要介紹了vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10Vue3.0寫(xiě)自定義指令的簡(jiǎn)單步驟記錄
Vue中除了內(nèi)置指令,也允許注冊(cè)自定義的指令,下面這篇文章主要給大家介紹了關(guān)于Vue3.0寫(xiě)自定義指令的相關(guān)資料,需要的朋友可以參考下2021-06-06