记一次基于vue-cli的多页面应用配置

初始环境

• vue-cli生成的单页应用

配置原则

尽量不修改原有的配置文件和目录结构，做到增量配置

目录结构

├── README.md
├── build                   # build 脚本
├── config                  # prod/dev build config 文件
├── index.html              # 主网页
├── package.json
├── src                     # Vue.js 核心业务
│   ├── App.vue             # App Root Component
│   ├── api                 # 接入后端服务的基础 API
│   ├── assets              # 静态文件
│   ├── components          # 组件
│   ├── main.js             # Vue 主入口文件
│   ├── router              # 路由
│   ├── service             # 服务
│   ├── pages               # 多页面
│   ├── store               # Vuex 状态管理
│   ├── util                # 通用 utility
│   └── view                # 各个页面
├── static                  # 静态文件
└── test                    # 测试

具体配置

修改文件

├── build                   # build 脚本
    ├── utils.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    ├── webpack.prod.conf.js
├── package.json
├── src
    ├── pages               # 多页面
        ├── scan # 例如增加一个scan的页面
            ├── scan.html
            ├── scan.js
            ├── scan.vue

配置代码

• package.json：glob模块

  "glob": "^7.1.2",
  

• utils.js

  ...
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
  const glob = require('glob')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const merge = require('webpack-merge')
  /* +++++++++++++++++++ 增加 +++++++++++++++ */
  
  ...
  
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
  const PAGE_PATH = path.resolve(__dirname, '../src/pages')
  exports.entries = function (){
    const entrys = glob.sync(PAGE_PATH + '/*/*.js')
  
    const entrysMap = {}
    entrys.forEach((filePath)=>{
      const fileName = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.js'))
      entrysMap[fileName] = filePath
    })
    return entrysMap
  }
  
  exports.htmlPlugins = function (){
    const entryHtmls = glob.sync(PAGE_PATH + '/*/*.html')
  
    const htmlsArray = []
    entryHtmls.forEach((filePath)=>{
      const fileName = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.html'))
  
      let HtmlWebpackPluginConf =  new HtmlWebpackPlugin({
        filename: fileName + '.html',
        template: filePath,
        chunks: ['manifest', 'vendor', fileName],
        inject: true
      })
  
      if(process.env.NODE_ENV === 'production'){
        HtmlWebpackPluginConf = merge(HtmlWebpackPluginConf, {
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
          },
          chunksSortMode: 'dependency'
        })
      }
  
      htmlsArray.push(HtmlWebpackPluginConf)
    })
    return htmlsArray
  }
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
  
  

• webpack.base.conf.js

  ...
  module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
      /* +++++++++++++++ 增加 ++++++++++++++++++++ */
      ...(utils.entries()),
      /* +++++++++++++++ 增加 ++++++++++++++++++++ */
      app: ["babel-polyfill", "./src/main.js"]
    },
  ...
  

• webpack.dev.conf.js

    ...
    plugins: [
      new webpack.DefinePlugin({
        'process.env': require('../config/dev.env')
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
      new webpack.NoEmitOnErrorsPlugin(),
      // https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        /* +++++++++++++++ 增加 ++++++++++++++++++++ */
        chunks: ['manifest', 'vendor', 'app'],
        /* +++++++++++++++ 增加 ++++++++++++++++++++ */
        inject: true
      }),
      // copy custom static assets
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, '../static'),
          to: config.dev.assetsSubDirectory,
          ignore: ['.*']
        }
      ])
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
    ].concat(utils.htmlPlugins())
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
  })
  ...
  

• webpack.prod.conf

...
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      /* +++++++++++++++ 增加 ++++++++++++++++++++ */
      chunks: ['manifest', 'vendor', 'app'],
      /* +++++++++++++++ 增加 ++++++++++++++++++++ */
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    ...
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
  ].concat(utils.htmlPlugins())
  /* +++++++++++++++ 增加 ++++++++++++++++++++ */
})
...

nginx 配置

location = /scan {
    rewrite (\/scan).* /scan.html/ redirct
}

参考

• 用vue构建多页面应用