Skip to content
A Vue multi-pages application boilerplate which is based on config created by vue-cli
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
build
config
src
static
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
LICENSE
README.md
package.json
yarn.lock

README.md

Vue Multi-pages Application Boilerplate

A Vue multi-pages application boilerplate which is based on config created by vue-cli

Usage

$ git clone repo-url
$ yarn install

$ npm run dev

$ npm run build

And open localhost:8000/index.html and localhost:8000/login.html

When you want to add new page, just do like these:

  • create newPage.html to src/
  • create newPage.entry.js to src/
  • put newPage.entry.js 's path to build/entries.js
module.exports = {
  index: './src/index.entry.js',
  login: './src/login.entry.js',
  newPage: './src/newPage.entry.js',
};

Details

After creating projects by vue init webpack, you'd better use these multi-pages application config showing below to replace all single-page application config.

Webpack multi-entries

  • build/webpack.base.config.js
const entries = require('../entries');

module.exports = {
  entry: entries,
  // ...
};

html-webpack-plugin

  • build/webpack.dev.config.js
const entries = require('../entries');

const htmlPlugins = Object.keys(entries).map(key => (
  new HtmlWebpackPlugin({
    filename: `${key}.html`,
    template: `./src/${key}.html`,
    inject: true,
    chunks: [key],
  })
));

module.exports = {
  // ...
  plugins: [
    // ...
  ].concat(htmlPlugins),
  // ...
};
  • build/webpack.prod.config.js
const entries = require('../entries');

const htmlPlugins = Object.keys(entries).map(key => (
  new HtmlWebpackPlugin({
    filename: path.resolve(__dirname, `../dist/${key}.html`),
    template: `./src/${key}.html`,
    inject: true,
    chunks: ['vendor', 'manifest', key],
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true,
    },
    chunksSortMode: 'dependency',
  })
));

module.exports = {
  // ...
  plugins: [
    // ...
  ].concat(htmlPlugins),
  // ...
};
You can’t perform that action at this time.