Vuepress: How can I add pure js code to `index.html`

Created on 3 Sep 2018  ·  8Comments  ·  Source: vuejs/vuepress


Bug report

Such as Baidu Statistics code，we usually add a piece of pure js code to index.html ：

<script> 
var _hmt = _hmt || []; 
(function() { 
var hm = document.createElement(“script”); 
hm.src = “//hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”; 
var s = document.getElementsByTagName(“script”)[0]; 
s.parentNode.insertBefore(hm, s); 
})(); 
</script>

How can I add those code to Vuepress ?



Version

Vuepress 0.14.2

Steps to reproduce

I try to add those code to config.js：

module.exports = {
  head: [ ['script', { ... }] ]
}

But I don't know how to do it.

Then I use a third part library vue-ba

install

yarn add vue-ba

then I modified enhanceApp.js :

import ba from 'vue-ba'

export default ({
  Vue,  options,  router,  siteData 
}) => {
  Vue.use(ba, 'xxxxxx')
}

when compiling，some error were outputed in console：

[10:47:08 AM] Compiled Server in 41s
[10:47:10 AM] Compiled Client in 43s
 FAIL   WAIT  Rendering static HTML...
Rendering page: /infoError rendering /:
 Visit ReferenceError: window is not defined
    at Object.<anonymous> (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:4368)
    at n (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:408)
    at /Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:791
    at /Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:801
    at /Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:146
    at Object.<anonymous> (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:285)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)https://yarnpkg.com/en/docs/cli/run
    at r (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-server-renderer/build.js:8346:16)
    at Object.<anonymous> (webpack:/external "vue-ba":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
error Command failed with exit code 1.
error Command failed with exit code 1.
 for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

What is expected?

Expose window in enhanceApp.js, or a mechanism for adding pure js code.

What is actually happening?

Other relevant information

  • Your OS: macOS High Sierra 10.13.6
  • Node.js version: v10.6.0
  • Browser version: Chrome 68.0.3440.106
  • Is this a global or local install? local
  • Which package manager did you use for the install? yarn
has workaround enhancement next
Source
picture quanzaiyu

Most helpful comment

Working with the config.js-approach:

module.exports = {
    head: [ ['script', {}, `
        var _hmt = _hmt || []; 
        (function() { 
        var hm = document.createElement(“script”); 
        hm.src = “//hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”; 
        var s = document.getElementsByTagName(“script”)[0]; 
        s.parentNode.insertBefore(hm, s); 
        })(); 
    `]]
}

This works, because of the head-option's signature: 

['tagname', attributesObject, contentString]
picture Tom-Julux on 3 Sep 2018
👍15 ❤4 🚀1

All 8 comments

Working with the config.js-approach:

module.exports = {
    head: [ ['script', {}, `
        var _hmt = _hmt || []; 
        (function() { 
        var hm = document.createElement(“script”); 
        hm.src = “//hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”; 
        var s = document.getElementsByTagName(“script”)[0]; 
        s.parentNode.insertBefore(hm, s); 
        })(); 
    `]]
}

This works, because of the head-option's signature: 

['tagname', attributesObject, contentString]
Tom-Julux picture Tom-Julux on 3 Sep 2018
👍15 ❤4 🚀1

Thanks, it works.

quanzaiyu picture quanzaiyu on 14 Sep 2018

@ulivz Can we use similar technique to add it to the body?

rajaraodv picture rajaraodv on 18 Sep 2018
👍5

would love to know how it works for adding script to body.

yipcma picture yipcma on 23 Sep 2018
👍5

@ulivz How to add pure javascript code to the <body> in index.html?

anisabboud picture anisabboud on 17 Apr 2019

@anisabboud See earlier comment, you need to do it in config.js

rajaraodv picture rajaraodv on 17 Apr 2019

@rajaraodv config.js is a workaround that adds the script to the <head>.

I was wondering if there's a new way to add it to the <body> since @ulivz linked a long PR to this thread.

anisabboud picture anisabboud on 18 Apr 2019
👍2

I was wondering if there's a new way to add it to the <body>

@ulivz any updates here, please?

easeev picture easeev on 10 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kid1412621 picture kid1412621  ·  3Comments
harryhorton picture harryhorton  ·  3Comments
genedronek picture genedronek  ·  3Comments
FadySamirSadek picture FadySamirSadek  ·  3Comments
ederchrono picture ederchrono  ·  3Comments