feat: make env variables available in HTML template

Author: yyx990803

packages/@vue/cli-service/lib/config/base.js

@@ -123,7 +123,11 @@ module.exports = (api, options) => {
     webpackConfig
       .plugin('html')
         .use(require('html-webpack-plugin'), [
-          fs.existsSync(htmlPath) ? { template: htmlPath } : {}
+          Object.assign(
+            fs.existsSync(htmlPath) ? { template: htmlPath } : {},
+            // expose client env to html template
+            { env: resolveClientEnv(options.baseUrl, true /* raw */) }
+          )
         ])
 
     webpackConfig

packages/@vue/cli-service/lib/util/resolveClientEnv.js

@@ -1,13 +1,21 @@
 const prefixRE = /^VUE_APP_/
 
-module.exports = function resolveClientEnv (publicPath) {
+module.exports = function resolveClientEnv (publicPath, raw) {
   const env = {}
   Object.keys(process.env).forEach(key => {
     if (prefixRE.test(key) || key === 'NODE_ENV') {
-      env[key] = JSON.stringify(process.env[key])
+      env[key] = process.env[key]
     }
   })
-  env.BASE_URL = JSON.stringify(publicPath)
+  env.BASE_URL = publicPath
+
+  if (raw) {
+    return env
+  }
+
+  for (const key in env) {
+    env[key] = JSON.stringify(env[key])
+  }
   return {
     'process.env': env
   }