vue-cli-plugin-html-replace v1.3.0

Vue-cli Plugin HTML Replace

A simple plugin to replace contents within your HTML files generated by Vue CLI.

• Getting started
• Configuration
  • Basic usage
  • Multi-page mode
• API
  • Global
  • Pattern

Getting started

:warning: Make sure you have Vue CLI 3.x.x installed:

vue -V

Navigate to your vue app folder and add the cli plugin:

vue add html-replace

Configuration

Basic usage

This plugin can be configured by defining htmlReplace via the pluginOptions in your vue.config.js.

The patterns property must either be an object or an array of objects. Each pattern must contain both match and replacement options, otherwise it will be ignored.

module.exports = {
    pluginOptions: {
        htmlReplace: {
            enable: (process.env.NODE_ENV === "production"),
            patterns: [
                {
                    match: "foo",
                    replacement: "bar",
                },
                {
                    match: /any/g,
                    replacement: "Globally replaced",
                },
                {
                    match: /<title>(.*)<\/title>/,
                    replacement: (match, $1) => `<title>"${$1}" has been replaced.</title>`,
                },
            ],
        },
    },
};

Multi-page mode

In case you'd need to prevent patterns to be applied to some of your pages, you can specify either one of excludes or includes options. If both options are set, then excludes will be ignored.

Each entry must be named after the key given for the page(s) to be excluded/included. These properties are optional and will be ignored when you're not building your app in multi-page mode. Thus all the patterns would be applied to your HTML files.

module.exports = {
    pages: {
        index: {
            entry: "src/App_1/main.js",
            filename: "app_1.html"
        },
        app_2: "src/App_2/main.js",
        app_3: "src/App_3/main.js",
    },
    pluginOptions: {
        htmlReplace: {
            patterns: [
                {
                    match: "foo",
                    replacement: "All of your pages will be affected",
                },
                {
                    match: /<title>.*<\/title>/,
                    replacement: "<title>This is the index page</title>",
                    includes: "index",
                },
                {
                    match: /<title>.*<\/title>/,
                    replacement: "<title>This is the second page</title>",
                    excludes: ["index" , "app_3"],
                },
            ],
        },
    },
};

API

Global

Pattern