Vue2多入口配置

能点进来的&＃xff0c;肯定是对单入口了解透彻&＃xff0c;对Vue2了解的人了。
话不多说。上干货。

前期准备

1.一个完成能运行的Vue单页项目.(本文以Vue提供的单页模板为例子)
2.若没有&＃xff0c;请找度娘。

目录

我的src目录有修改&＃xff0c;如下&＃xff1a;

本例要修改的配置文件如下&＃xff1a;

config/index.js修改

修改如下&＃xff1a;

代码如下&＃xff1a;
在config/index.js中添加两个字段。
view:是方所有页面的文件夹名称
defaultEntry&＃xff1a;存有两个属性&＃xff0c;是主页面的html和js的路径&＃xff08;我的主页js入口和html不在同一个文件夹下&＃xff0c;这里配一下&＃xff09;

//多入口配置entryPath:[&＃39;view&＃39;], defaultEntry:{html:&＃39;index&＃39;,js:&＃39;./src/index&＃39;},

utils.js修改

修改如下&＃xff1a;

代码如下&＃xff1a;

//获取多级入口
let glob &＃61; require(&＃39;glob&＃39;)
exports.getMultiEntry &＃61; function (globPath,type) {let entries &＃61; {}, basename, tmp, pathname;glob.sync(globPath).forEach(function (entry) {basename &＃61; path.basename(entry, path.extname(entry));tmp &＃61; entry.split(&＃39;/&＃39;).splice(-4);let pathSrc&＃61;tmp[0]&＃43;&＃39;/&＃39;&＃43;tmp[1]if(tmp[0]&＃61;&＃61;&＃61;&＃39;src&＃39;){pathSrc&＃61;tmp[2]}pathname &＃61; pathSrc&＃43;&＃39;/&＃39;&＃43;basename; // 正确输出js和html的路径entries[pathname] &＃61; entry;});if(config.defaultEntry&&config.defaultEntry!&＃61;&＃61;&＃39;&＃39;){entries[&＃39;index&＃39;]&＃61;config.defaultEntry[type]&＃43;&＃39;.&＃39;&＃43;type}console.log(&＃39;entries-----------&＃39;, entries);return entries;
}

webpack.base.conf.js修改

如下&＃xff1a;

代码&＃xff1a;

//多入口配置添加
let entries&＃61;{}
for(let i&＃61;0;i}
const chunks &＃61; Object.keys(entries)


webpack.dev.conf.js

如下&＃xff1a;

代码&＃xff1a;

//多入口配置添加
let htmlPages &＃61; {}
for (let i &＃61; 0; i }
let pagesConfig &＃61; []
for (let pagename in htmlPages) {const pageCon &＃61; {filename: pagename&＃43;&＃39;.html&＃39;,template: htmlPages[pagename],chunks: [pagename, &＃39;vendors&＃39;, &＃39;manifest&＃39;], // 每个html引用的js模块, 由此看出html和js名字要相同inject: true}pagesConfig.push(new HtmlWebpackPlugin(pageCon))
}

注意&＃xff0c;别忘了隐藏源文件的new HtmlWebpackPlugin一段代码。
在plugins数组后面接上一句&＃xff1a;.concat(pagesConfig)

webpack.prod.conf.js修改

修改如下&＃xff1a;

代码&＃xff1a;

//多入口配置添加
let htmlPages &＃61; {}
for (let i &＃61; 0; i }
console.log(htmlPages)
for (let pagename in htmlPages) {const pageCon &＃61; {filename: pagename &＃43;&＃39;.html&＃39;,template: htmlPages[pagename],// 模板路径inject: true,// js插入位置chunks: ["vendor", "manifest",pagename],// 每个html引用的js模块&＃xff0c;也可以在这里加上vendor等公用模块chunksSortMode: &＃39;dependency&＃39;,hash:true}console.log(pageCon)webpackConfig.plugins.push(new HtmlWebpackPlugin(pageCon))
}

别忘了隐藏这段代码&＃xff1a;

好啦完成了

npm run build
npm run dev
进入浏览器打开地址
http://localhost:8080/first (first页面)
http://localhost:8080/first/#/login (first页面子路由1)
http://localhost:8080/first/#/regist (first页面子路由2)
http://localhost:8080/second (second页面)

http://localhost:8080/ (主页)