The initial conditions

  • Vue-single page application generated by cli

The configuration principle

Do not modify the original configuration file and directory structure

The directory structure

├ ─ ─ the README. Md ├ ─ ─ the build# the build scripts├ ─ ─ the config# prod/dev build config├ ─ ─ index. HTMLThe homepage for the #├ ─ ─ package. Json ├ ─ ─ the SRC# vue.js core business│ ├ ─ ─ App. Vue# App Root Component│ ├ ─ ─ APIBasic API for accessing back-end services│ ├ ─ ─ assets# static file│ ├ ─ ─ the components# components│ ├ ─ ─ the main js# Vue main entry file│ ├ ─ ─ the router# routing│ ├ ─ ─ the service# service│ ├ ─ ─ pages# multiple page│ ├ ─ ─ storeVuex state management│ ├ ─ ─ util# general utility│ └ ─ ─ the view# Each page├ ─ ─ the static# static file└ ─ ─test                    # test
Copy the code

Specific configuration

Modify the file

├ ─ ─ the build# the build scripts├ ─ ─ utils. Js ├ ─ ─ webpack. Base. Conf., js ├ ─ ─ webpack. Dev. Conf., js ├ ─ ─ webpack. Prod. Conf., js ├ ─ ─ package. The json ├ ─ ─ the SRC ├ ─ ─ pages# multiple page├ ─ ─ scanFor example, add a scan page├── Scan.html ├── scan.js ├─ scan.vueCopy the code

Configuration code

  • Package. json: glob module

    "glob": "^ 7.1.2." ".Copy the code

  • utils.js

    . / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / const glob = require ('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge') / * + + + + + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + * /... / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / 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)
  })
  returnHtmlsArray} / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * /Copy the code

  • webpack.base.conf.js

    . module.exports = { context: path.resolve(__dirname,'.. / '), entry: {/ * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * /... (utils. Entries ()), / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / app: ["babel-polyfill"."./src/main.js"]},...Copy the code

  • 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', / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / chunks: ['manifest'.'vendor'.'app'], / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / inject:true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '.. /static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['*']}]) / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * /] concat (utils. HtmlPlugins ()) / * + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + * /})...Copy the code

  • webpack.prod.conf

. new HtmlWebpackPlugin({ filename: process.env.NODE_ENV ==='testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html', / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / chunks: ['manifest'.'vendor'.'app'], / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * / 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'}),... / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * /] concat (utils. HtmlPlugins ()) / * + + + + + + + + + + + + + + + add + + + + + + + + + + + + + + + + + + + + * /})...Copy the code

Nginx configuration

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

reference

  • Build multi-page applications with VUE