vue-cli

vuepcwebvue-cli()vue

 build # build folder
    build.js
    check-versions.js
    dev-client.js
    dev-server.js
    utils.js
    vue-loader.conf.js
    webpack.base.conf.js
    webpack.dev.conf.js
    webpack.dll.conf.js
    webpack.prod.conf.js

 config # config part
    dev.env.js
    index.js
    prod.env.js

 static # static part

 src  # main folder
  assets  # 
   img
    logo.png
   js
   css
   
  components # 
   Rule.vue
      
   Timedown.vue
      
   users.vue
      
   Gametime.vue
      
       toast
          index.js
          toast.vue
      
   loading
           index.js
           loading.vue
   
    mock # 
   
   
   
    utils # 
   index.js
   
  views  # 
      create  # create part 
      create.html # create.html 
      create.js# entry js
      create.vue  # create vue
       
       
      jinli  # jinli part 
      jinli.html # jinli.html 
      jinli.js# entry js
      jinli.vue  # jinli vue
       
       
      money  # money part 
      money.html # money.html 
      money.js# entry js
      money.vue  # money vue
       
       
      on  # on part 
      on.html # on.html 
      on.js# entry js
      on.vue  # on vue
       
      page # page part
           
         page.html # page.html 
       page.js# entry js
       page.vue  # page vue
 LICENSE
 .babelrc          # babel config (es2015 default)
 .eslintrc.js      # eslint config (eslint-config-vue default)
 package.json
 README.md

1. config/index.js

module.exports = {
  build: {...},
  dev: {...},
  // 
  pageEntry: './src/views/**/*.js' // 
  // pageEntry: './src/main.js' // 
}

2. build/utils.js

npm install --save-dev glob

var glob = require('glob') // glob

// exports
// 
exports.getEntries = function () {  
  if (!/\*/.test(config.pageEntry)) {    
    //     
    return {'index': config.pageEntry}  
  } else {    
    //     
    var files = glob.sync(config.pageEntry)    
    var entries = {}    
    files.forEach(function (filepath) {      
      // (view)     
      var split = filepath.split('/')      
      var name = split[split.length - 2]      
      entries[name] = filepath    
    })    
    return entries  
  }
}

// connect-history-api-fallback 
// https://github.com/bripkens/connect-history-api-fallback
exports.getRewrites = function () {
  var entries = exports.getEntries()
  var rewrites = []

  Object.keys(entries).forEach(function (name) {
    var reg = new RegExp('^\/' + name + '$')
    rewrites.push({from: reg, to: '\/' + name + '.html'})
  })

  return rewrites
}

3. build/webpack.base.conf.js

...
module.exports = {
  entry: utils.getEntries()
}
...

4. build/webpack.dev.conf.js

...
module.exports = {
  ...
  plugins: [
    ...
    // https://github.com/ampedandwired/html-webpack-plugin
    /* 
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }), */
    ...
  ]
}
...

// 
var entries = utils.getEntries()
Object.keys(entries).forEach(function (name) {
  // html
  console.log(entries[name])
  const chunk = entries[name].slice(entries[name].lastIndexOf('/')+1).split('.')[0]; 
  var plugin = new HtmlWebpackPlugin({
    //  +html
    filename: name + '.html',
    //( index.html)
    template: entries[name].slice(0, -3) + '.html', 
    inject: true,
    hash: process.env.NODE_ENV === 'production',
    chunks: ['vendors', chunk]
  });
  module.exports.plugins.push(plugin)
})

5. build/dev-server.js

// utils
var utils = require('./utils')
...
// history
// xxxx/login.html -> xxxx/login
app.use(require('connect-history-api-fallback')(
  {rewrites: utils.getRewrites()}
))
...

dev

6. build/webpack.prod.conf.js

...
var webpackConfig = merge(baseWebpackConfig, {
  ...
  /* 
  new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
  }),*/
  ...
})

// 
var entries = utils.getEntries()
Object.keys(entries).forEach(function (name) {
  // html
  var plugin = new HtmlWebpackPlugin({
    filename: name + '.html',
    template: entries[name].slice(0, -3) + '.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    // 
    chunks: ['manifest', 'vendor', name],
    hash: true
  });

  webpackConfig.plugins.push(plugin)
})

cdnVue.js v2.5.2

# 
npm install

# 
npm run dev

# 
npm run build