Vue2-多入口配置

最新推荐文章于 2024-03-30 09:45:13 发布

weixin_33688840

最新推荐文章于 2024-03-30 09:45:13 发布

阅读量640

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：https://segmentfault.com/a/1190000016721201

本文详细介绍如何在Vue项目中配置多入口，包括修改配置文件、利用Webpack进行多页面打包，以及实现不同页面间的独立加载与路由配置。适用于对Vue有一定了解的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前期准备

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

config/index.js修改

修改如下：
图片描述

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

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

utils.js修改

修改如下：
图片描述
代码如下：

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

webpack.base.conf.js修改

如下：
图片描述

代码：

//多入口配置添加
let entries={}
for(let i=0;i<config.entryPath.length;i++){
  let tempEntry= utils.getMultiEntry('./src/'+config.entryPath[i]+'/**/*.js','js'); // 获得入口js文件
  entries=Object.assign(entries,tempEntry)
}
const chunks = Object.keys(entries)

webpack.dev.conf.js

如下：
图片描述

代码：

//多入口配置添加
let htmlPages = {}
for (let i = 0; i < config.entryPath.length; i++) {
  let tempHtml = utils.getMultiEntry('./src/' + config.entryPath[i] + '/**/*.html', 'html') // 获得入口js文件
  htmlPages = Object.assign(htmlPages, tempHtml);
}
let pagesConfig = []
for (let pagename in htmlPages) {
  const pageCon = {
    filename: pagename+'.html',
    template: htmlPages[pagename],
    chunks: [pagename, 'vendors', 'manifest'], // 每个html引用的js模块, 由此看出html和js名字要相同
    inject: true
  }
  pagesConfig.push(new HtmlWebpackPlugin(pageCon))
}

注意，别忘了隐藏源文件的new HtmlWebpackPlugin一段代码。
在plugins数组后面接上一句：.concat(pagesConfig)
图片描述

webpack.prod.conf.js修改

修改如下：
图片描述
代码：

//多入口配置添加
let htmlPages = {}
for (let i = 0; i < config.entryPath.length; i++) {
  let tempHtml = utils.getMultiEntry('./src/' + config.entryPath[i] + '/**/*.html', 'html') // 获得入口html文件
  htmlPages = Object.assign(htmlPages, tempHtml);
}
console.log(htmlPages)
for (let pagename in htmlPages) {
  const pageCon = {
    filename: pagename +'.html',
    template: htmlPages[pagename],// 模板路径
    inject: true,// js插入位置
    chunks: ["vendor", "manifest",pagename],// 每个html引用的js模块，也可以在这里加上vendor等公用模块
    chunksSortMode: 'dependency',
    hash:true
  }
  console.log(pageCon)
  webpackConfig.plugins.push(new HtmlWebpackPlugin(pageCon))
}

别忘了隐藏这段代码：
图片描述

好啦完成了

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/ (主页)