对于某些项目来说，单页面不能很好的满足需求，所以需要将vue-cli创建的单页面项目改为多页面项目。

需要修改以下几个文件：

1、下载依赖glob

$npm install glob --save-dev

2、修改build下的文件

（1）修改webpack.base.conf.js

添加以下代码：

var glob = require('glob')；
var entries = getEntry('./src/pages/**/*.js')

将module.exports中的

entry: {
   app: './src/main.js'
  },

注释掉，然后添加这一行代码：

 entry: entries,

至于entries是什么，别急呀，看下面：

添加一个方法：

//获取入口js文件
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js得到index
  entries[pathname] = entry;
 });
 return entries;
}

这个文件修改成这样子就可以了。

（2）修改webpack.dev.conf.js

添加以下代码：

//引入
var glob = require('glob')
var path = require('path')

将module.exports中的plugins里的

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

注释掉，然后添加以下代码：

function getEntry(globPath) {
 
 var entries = {},basename;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  chunks:[pathname]
 };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

这个文件修改到此就可以了。

（3）webpack.prod.conf.js

这个文件修改的套路与上一个文件类似
 添加以下代码： var glob = require('glob') 因为项目在创建时，生成项目的时候是直接将可选的所有依赖都选择了yes，所以项目中的env的声明定义如下：

复制代码 代码如下:
var env = process.env.NODE_ENV === 'testing ? require('../config/test.env') : config.build.env ;

但是由于webpack.test.conf.js文件目前还没有进行修改，所以需要把这行声明换成下面这行：

var env = config.build.env

将webpackConfig中的plugins里的

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

注释掉，在声明定义webpackConfig的后面添加以下代码：

function getEntry(globPath) {
 var entries = {},
  basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 var conf = {
   filename: process.env.NODE_ENV === 'testing'
    ? pathname + '.html'
    : config.build[pathname],
   template: pages[pathname],
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunks:[pathname]
  }
 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

此时，这个文件也修改好了。

3、修改config下的文件

这个文件夹下，只需要修改一个文件：index.js 这个文件的作用是，寻找文件路径，然后根据这个文件设置的目录层级，生成打包后的文件以及相应的层级文件结构。 添加以下代码：

var build = {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css']
}

function getEntry(globPath) {
 var entries = {},basename;

 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');
 
//入口 index: path.resolve(__dirname, '../dist/index.html')
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

然后将module.exports中的build的值换成我们刚刚添加声明的变量build。 如果希望修改打包后的目层级结构，可以在build中修改；还可以在build中增加我们需要定义的变量，比如我们需要将fabfile.py和favicon.ico拷贝到dist目录下的a目录下，就可以在build中定义一个属性，

distA:path.resolve(__dirname, '../dist/a), 

然后因为在webpack.prod.conf.js中已经引入了'copy-webpack-plugin'（var CopyWebpackPlugin = require('copy-webpack-plugin')），我们就可以在 webpackConfig.plugins下添加如下代码：

new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../fabfile.py'),
   to: config.build.distA,
   template: 'fabfile.py'
  }
 ])
new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../favicon.ico'),
   to: config.build.distA,
   template: 'favicon.ico'
  }
 ])

在src目录下添加pages文件夹

目录的层级结构安排成类似于这种形式：

5、打包

做完以上修改，虽然本地运行没有问题，但是打包后，还是会有问题，会出现报错：webpackJsonp is not defined
解决方式如下： 在webpack.prod.conf.js文件下的for (var pathname in pages)循环中定义的conf里，添加两行代码：

chunksSortMode: 'dependency', // dependency 页面中引入的js按照依赖关系排序；manual 页面中引入的js按照下面的chunks的数组中的顺序排序；

chunks: ['manifest', 'vender', pathname] // 生成的页面中引入的js，'manifest', 'vender'这两个js是webpack在打包过程中抽取出的一些公共方法依赖，其中，'manifest'又是从'vender'中抽取得到的，所以这三个js文件的依赖关系是 pathname依赖 'vender'，'vender'依赖'manifest'.

综上，就是本次项目从单页面到多页面项目的转变历程，关于webpack.test.conf.js文件的修改，后续修改成功后，会继续补充添加。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # cli  # 多页面  # 多页面应用  # Vue-cli单页面到多页面  # vue单页面改造多页面应用的全过程记录  # vue将单页面改造成多页面应用的方法  # vue单页面改造多页面应用详解  # 就可以  # 目录下  # 这行  # 多页  # 几个  # 还没有  # 很好  # 会有  # 好了  # 还可以  # 又是  # 这两个  # 只需要  # 可选  # 报错  # 这样子  # 到此  # 做完  # 类似于  # 这三个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何用VPS主机快速搭建个人网站？  北京专业网站制作设计师招聘,北京白云观官方网站？  node.js报错：Cannot find module 'ejs'的解决办法  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  JS弹性运动实现方法分析  Linux后台任务运行方法_nohup与&使用技巧【技巧】  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  创业网站制作流程,创业网站可靠吗？  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  iOS中将个别页面强制横屏其他页面竖屏  深圳网站制作平台,深圳市做网站好的公司有哪些？  七夕网站制作视频,七夕大促活动怎么报名？  北京的网站制作公司有哪些,哪个视频网站最好？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  零服务器AI建站解决方案：快速部署与云端平台低成本实践  javascript读取文本节点方法小结  如何在服务器上配置二级域名建站？  如何快速查询网址的建站时间与历史轨迹？  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  如何在阿里云ECS服务器部署织梦CMS网站？  如何获取PHP WAP自助建站系统源码？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  javascript中对象的定义、使用以及对象和原型链操作小结  如何在香港服务器上快速搭建免备案网站？  独立制作一个网站多少钱,建立网站需要花多少钱？  Android滚轮选择时间控件使用详解  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  如何利用DOS批处理实现定时关机操作详解  如何在云服务器上快速搭建个人网站？  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  JavaScript如何实现倒计时_时间函数如何精确控制  JavaScript如何实现继承_有哪些常用方法  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  用yum安装MySQLdb模块的步骤方法  详解CentOS6.5 安装 MySQL5.1.71的方法  Laravel如何使用Collections进行数据处理？（实用方法示例）  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  Laravel怎么清理缓存_Laravel optimize clear命令详解  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  如何在宝塔面板创建新站点？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  如何快速查询域名建站关键信息？