详解webpack编译多页面vue项目的配置问题

日期：2020-05-11 栏目：程序人生浏览：次

本文主要介绍了webpack编译多页面vue项目的配置问题，分享给大家，具体如下：

一般情况下，构建一个vue项目的步骤为：

1，安装nodejs环境

2，安装vue-cli

cnpm install vue-cli -g

3，构建vue项目

vue init webpack-simple vue-cli-multipage-demo

4，安装项目依赖包

cnpm install

5，在开发环境下运行该项目：

npm run dev

通过上面这几步一个简单的vue项目的开发环境基本就搭建起来，接下来的工作就是填代码了。

最近在做一个前端代码重构的时候发现一个问题，使用这个脚手架构建的项目满足不了我的需求，其实这个需求有一点违背我们vue的初衷的，vue开发的是单页面应用(SPA),这里我需要他实现多页面的效果。什么意思呢？举个例子：我们在网页开发的时候，有时候点击一个连接，浏览器会新代开一个tab页来显示我们的内容，这个时候其实就出现多页面的情况了，新开的这个页面其实已经不属于我们之前的那个页面，(SPA)其实是通过路由的方式，让多个页面在主页面中显示。但是这个时候新开的页面已经脱离主页面了。

通过vue-cli脚手架构建的项目的webpack配置文件支持单页面的应用开发，他只有一个入口文件。而且最后只会生产一个页面。如何才能满足我的需求，让webpack同时便于多个页面呢，其实还是比较简单的，只需要将webpack稍微改装一下，就完全可以了。

首先我们需要在build文件下的utils.js文件家中增加一个获取文件夹中文件路径的方法,这个方法将目标文件解析成对象的形式。
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文件，修改入口文件，原来的文件是单文件，现在需要将单文件入口改成多文件入口了。

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']); // 获得多页面的入口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,//这是通过前面新增的方法获取的文件路径对象
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 filename: '[name].js'
 }
 ...
}

转载注明出处：http://www.heiqu.com/1075.html

详解webpack编译多页面vue项目的配置问题

相关推荐