詳解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)目依賴包
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)目滿足不了我的需求,其實(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è)面。如何才能滿足我的需求,讓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 然后我們就可以訪問(wèn)不同的頁(yè)面了,這里需要注意一下,既然我們需要管理多個(gè)頁(yè)面,我們就應(yīng)該在src下建立一個(gè)目錄專門來(lái)訪放不同的頁(yè)面。這樣項(xiàng)目結(jié)構(gòu)看起來(lái)更加清晰,便于維護(hù)。
這是我寫的一個(gè)demo地址,有興趣的可以拉下來(lái)看看vue-cli-multi-page
運(yùn)行起來(lái)后訪問(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 文件。這里的模板類型可以是任意你喜歡的模板,可以是 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)文章
vue3引入highlight.js進(jìn)行代碼高亮的方法實(shí)例
最近忙著開(kāi)發(fā)自己的開(kāi)發(fā)腳手架,在做代碼生成器的時(shí)候,有個(gè)預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進(jìn)行代碼高亮的相關(guān)資料,需要的朋友可以參考下2022-04-04
使用vue-cli3 創(chuàng)建vue項(xiàng)目并配置VS Code 自動(dòng)代碼格式化 vue語(yǔ)法高亮問(wèn)題
這篇文章主要介紹了使用vue-cli3 創(chuàng)建vue項(xiàng)目,并配置VS Code 自動(dòng)代碼格式化 vue語(yǔ)法高亮問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue props傳值失敗 輸出undefined的解決方法
今天小編就為大家分享一篇vue props傳值失敗 輸出undefined的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue+tsx使用slot沒(méi)有被替換的問(wèn)題
本文主要介紹了Vue+tsx使用slot沒(méi)有被替換的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件,子組件使用 $emit 觸發(fā)父組件的自定義事件,今天通過(guò)示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用,感興趣的朋友一起看看吧2022-03-03
Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解
這篇文章主要介紹了Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問(wèn)題
這篇文章主要介紹了vue-router動(dòng)態(tài)路由設(shè)置參數(shù)可選,文中給大家提到了vue-router 動(dòng)態(tài)添加 路由的方法,需要的朋友可以參考下2019-08-08

