Vue-cli: Template execution failed: ReferenceError: BASE_URL is not defined

Created on 19 Dec 2018 · 8Comments · Source: vuejs/vue-cli

Version

3.2.1

Reproduction link

https://github.com/richex-cn/vue-cli-demo/commit/8be83a87cfeac1b16f3fe39ca3e570c21ac7aa27

Environment info

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
  Binaries:
    Node: Not Found
    Yarn: 1.10.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.21
    vue-eslint-parser:  4.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Run yarn serve after:

 ERROR  Failed to compile with 2 errors                                                                         10:49:42

 error

Template execution failed: ReferenceError: BASE_URL is not defined

  ReferenceError: BASE_URL is not defined

  - index.html:4 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:11

  - index.html:9 module.exports
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:9:3

  - index.js:284 Promise.resolve.then
    [vue_cli_demo]/[html-webpack-plugin]/index.js:284:18

What is expected?

Good running.

What is actually happening?

Couldn't run serve.

see this github repositories: https://github.com/richex-cn/vue-cli-demo/commit/8be83a87cfeac1b16f3fe39ca3e570c21ac7aa27

Source

richex-cn

Most helpful comment

To get a list of plugins:

npm run vue-cli-service inspect --plugins

In the returned list you will find that there's a plugin called html.

To see the current config of that one plugin:

npm run vue-cli-service inspect --plugin html

To change that plugin's config (relevant docs):

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
         //  args[0] contains the plugin's options object
        // change it to what you need it to be.
        return args
      })
  }
}

LinusBorg on 3 Jun 2019

🎉3

All 8 comments

Why are you adding HTMLWebpack Template? Vue-cli already has one in its config.

that new plugin is the reason you are seeing an error: The index.html template expects a BASE_URL variable:

https://github.com/richex-cn/vue-cli-demo/commit/8be83a87cfeac1b16f3fe39ca3e570c21ac7aa27#diff-528c3923d718a8860f5d8c05c3931c55L7

but your HTMLWebpack Plugin doesn't provide that variable (our plugin does).

Not a bug in vue-cli.

LinusBorg on 20 Dec 2018

Hello, can I whether there is a way to add additional configuration to your html-webpack-plugin?
I just need to exclude one module/bundle from being imported as script tag in html (Im talking about service worker script)

TheMaikXX on 31 May 2019

Hello, can I whether there is a way to add additional configuration to your html-webpack-plugin?
I just need to exclude one module/bundle from being imported as script tag in html (Im talking about service worker script)

@TheMaikXX
What do you mean I should do?

richex-cn on 3 Jun 2019

Oh sorry, I meant to ask @LinusBorg
He says that Vue has its own html-webpak-plugin implementation but I would just need to skip one script (service worker) from being injected into HTML..
So I'd like to enrich existing configuration of Vue's html-webpak-plugin and I don't know how.. (whether it is possible)

TheMaikXX on 3 Jun 2019