脚本宝典收集整理的这篇文章主要介绍了

vue多页面应用打包配置

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

一直是使用vue官方提供的脚手架工具来做开发单页应用,突发奇想的想做一个多页应用的打包配置,顺便了解一下webpack的使用。花了几天时间搞定之后才发现了这篇文章《进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇)》。但还是要记录一下自己搭建的过程。代码地址:https://github.com/lzy1043/webpack-multiple-pages

代码结构

build目录下是webpack的配置文件
src/components目录下是通用的组件
src/views下是应用的页面

图片描述

打包前多页面的目录结构:

图片描述

打包之后的生成的项目结构:

图片描述

代码里面的ESlint和babel的配置是直接使用的vue-cli中的配置。

配置多入口

1.多页面目录结构

多页应用就代表着需要有多个入口,webpack的entry支持多入口,使用entry的对象语法对每个页面设置入口。类似下面这种写法:

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

但是我们这里需要使用node的fs模块来取得所有需要进行配置的页面。

可以看到这里有四个页面index,home,about和news,然后每一个页面中都有一个模板文件,一个入口js文件,其实这里的html模板文件都可以使用同一个,后面会做一些修改。每个目录下还应该有一个根vue组件。比如index目录下的app.vue。

2.获取views目录下的多页面,生成入口配置

config/index.js :生成多页面的入口配置

首先,读取多页面目录,找出其中需要配置入口的页面

// 设置基础目录
const baseDir = path.resolve(__dirname, '../src/views')

// excludeDir 是用来配置忽略哪些文件夹,不生成入口文件,这里由于index打包后的目录有些特殊需要单独设置
const excludeDir = ['index']

// 取到所有页面,目录名称
const viewArr = fs.readdirSync(baseDir).filter(dir => {
 return excludeDir.indexOf(dir) === -1 && fs.statSync(baseDir + '/' + dir).isDirectory()
})

首页的入口配置:

let entriesConfig = [{
  entryName: 'index',
  entry: path.resolve(baseDir, 'index/index.js'),
  filename: 'index.html',
  template: path.resolve(baseDir, 'index.html')
}]

然后对取出的页面做遍历生成入口名称,入口配置,模板名称,模板路径

viewArr.forEach(dir => {
  // 入口文件
  const enrtyFile = dir + '.js'
  // 模板文件名称,
  const filename = dir + '/' + dir + '.html'
  entriesConfig.push({
    //入口名称
    entryName: dir,
    //入口文件
    entry: path.resolve(baseDir, dir, enrtyFile),
    // 打包生成的模板名称,如果filename包含路径信息会创建对应的路径
    //比如about这个页面左后打包的结果是: /dist/about/about.html
    filename: filename,
    //html模板的路径
    template: path.resolve(baseDir, filename)
  })
})

最后将入口的配置

module.exports = entriesConfig

这样多页面的入口配置就完成了,下面就需要配置webpack开发环境的打包环境的配置了。

3.配置开发环境和打包环境

首先是做了一个基础的配置,包括入口和module,module.rules这一块使用的也是vue-cli生成的项目所有的配置,不做过多的赘述,直接看代码。

// webpack.base.conf.js
const path = require('path')
const entriesConfig = require('../config')
let entries = {}

entriesConfig.forEach(item => {
  entries[item.entryName] = item.entry
})

module.exports = {
  entry: entries,
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, '../src')
    }
  },
  module: {
    rules: [
      {
        test: /.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.resolve(__dirname, 'src')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, '../src')]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: path.posix.join('static', 'img/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

其次,开发环境下主要是需要配置一个热更新的部分,这部分也是参考了vue-cli中的配置, 使用express + webpack-dev-middleware + webpack-hot-middleware。使用的方法webpack中讲的也很清楚,大家可以自己看一下,我把链接贴在这:

最后就是打包的配置,在打包的匹配值中需要注意的一点就是需要根据生成的入口文件中的filename和template自动生成对应的页面,可以使用html-webpack-plugin来生成。其余的配置都和vue的单页应用类似。

//部分代码
entriesConfig.forEach(item => {
  const option = {
    filename: item.filename,
    template: item.template,
    chunks: ['vendor', item.entryName]
  }
  webpackConfig.plugins.push(new HtmlWebpackPlugin(option))
})

差不多就是这些。

不足的部分

没有考虑子页面,比如在news文件夹中还有子文件夹构成的子页面,这里暂时没有处理,后面会加上。

代码地址:https://github.com/lzy1043/webpack-multiple-pages

总结

以上是脚本宝典为你收集整理的

vue多页面应用打包配置

全部内容,希望文章能够帮你解决

vue多页面应用打包配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过