VUE2X实战开发随笔

Posted 2020-09-23

vue的单页面应用开发会把页面中所有的文件都会打包在build.js文件中，这样可能这个文件变得很大，对性能，体验都不是很好的选择；

单页面应用改为多页面应用的方法：

•  开始改造

       最主要的一步，将webpack进行改造以满足对多页面需求的支持，其实多页面，即是webpack有多个入口。在此步中，我们主要的操作的对象是 build文件夹下的js文件。

• 首先，我们对 utils.js进行改造
• 添加一个方法：getEntries，方法中需要使用到node的globa模块，所以需要引入 

  // glob模块，用于读取webpack入口目录文件
var glob = require(‘glob‘);

  exports.getEntries = function (globPath) {

• 其次，对webpack.base.conf.js进行改造
• 删除 entry: {app: ‘./src/main.js‘},，取而代之如下：

  module.exports = {
      ···
      entry: utils.getEntries(‘./src/module/**/*.js‘),

• 最后改造webpack.dev.conf.js和webpack.prod.conf.js
• 移除原来的htmlWebpackPlugin

var pages = utils.getEntries(‘./src/module/**/*.html‘) for(var page in pages) { // 配置生成的html文件，定义路径等 var conf = { filename: page + ‘.html‘, template: pages[page], //模板路径 inject: true, // excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口 // 如何更好的理解这块呢？举个例子：比如本demo中包含两个模块（index和about），最好的当然是各个模块引入自己所需的js， // 而不是每个页面都引入所有的js，你可以把下面这个excludeChunks去掉，然后npm run build，然后看编译出来的index.html和about.html就知道了 // filter：将数据过滤，然后返回符合要求的数据，Object.keys是获取JSON对象中的每个key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }) } // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }　　

• 打开工程

npm run dev

在dev.server.js 文件中有打开的路径，直接跟你想要打开的html文件名

如：

var uri = ‘http://localhost:‘ + port +‘/xxx.html‘