我之前在vue-cli项目里也碰到过完全一样的问题——用Pug时传服务端变量轻轻松松，换成静态HTML构建后就不知道怎么搞了。试了几种方法，整理了几个最实用的方案，你可以根据自己的场景选：

方案一：利用html-webpack-plugin的模板参数（适合静态构建或构建时可确定的变量） #

vue-cli默认用的就是html-webpack-plugin，而且它支持给模板传递自定义参数，哪怕你的模板文件后缀是.html，本质上也是可以用EJS语法的。

1. 配置vue.config.js，传入变量
   在项目根目录的vue.config.js里，修改webpack配置，给HtmlWebpackPlugin添加自定义参数：

   // vue.config.js
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     configureWebpack: {
       plugins: [
         new HtmlWebpackPlugin({
           template: 'public/index.html', // 你的模板文件路径
           // 这里传入需要传递的服务端变量，可以是环境变量、或者服务端提前生成的值
           templateParameters: {
             API_BASE_URL: process.env.VUE_APP_API_URL, // 比如从环境变量取
             APP_NAME: '我的Vue项目'
           }
         })
       ]
     }
   }
   

2. 在HTML模板里注入变量到全局
   打开public/index.html，用EJS语法把变量注入到window对象里，这样客户端脚本就能直接访问：

   <!-- public/index.html -->
   <script>
     // 把服务端变量挂载到全局
     window.__APP_CONFIG__ = {
       apiBaseUrl: '<%= API_BASE_URL %>',
       appName: '<%= APP_NAME %>'
     }
   </script>
   

3. 客户端脚本使用变量
   在Vue组件或者其他客户端脚本里，直接访问全局变量即可：

   // 比如在Vue组件的created钩子中
   export default {
     created() {
       console.log('API地址:', window.__APP_CONFIG__.apiBaseUrl)
     }
   }
   

方案二：使用vue-cli内置的环境变量（适合纯静态构建的固定变量） #

如果你的变量是在构建时就确定的（比如API地址、项目名称这类固定配置），用vue-cli的环境变量是最省心的，它会自动帮你把变量注入到客户端。

1. 创建环境变量文件
   在项目根目录新建.env文件（或者.env.production、.env.development区分环境），写入以VUE_APP_开头的变量：

   # .env.production
   VUE_APP_API_BASE_URL=https://api.example.com
   VUE_APP_APP_NAME=线上Vue项目
   

2. 客户端直接使用
   在Vue组件或脚本里，直接通过process.env访问这些变量：

   console.log('生产环境API地址:', process.env.VUE_APP_API_BASE_URL)
   

注意：只有以VUE_APP_开头的变量才会被webpack的DefinePlugin注入到客户端，其他前缀的变量不会被暴露。

方案三：运行时服务端替换占位符（适合动态变量，比如每个请求不同的数据） #

如果你的变量是动态的（比如用户登录信息、请求专属的参数），那需要在Node.js服务端托管静态文件时，动态替换HTML里的占位符。

1. 在HTML模板里留占位符
   打开public/index.html，添加一个占位符：

   <!-- public/index.html -->
   <script>
     window.__SERVER_DATA__ = {{SERVER_DATA_PLACEHOLDER}}
   </script>
   

2. Node.js服务端替换占位符
   假设你用Express做服务端，读取构建后的HTML文件，替换占位符后再返回给客户端：

   // server.js
   const fs = require('fs')
   const path = require('path')
   const express = require('express')
   const app = express()
   
   // 读取构建好的HTML模板
   const htmlTemplate = fs.readFileSync(path.join(__dirname, 'dist/index.html'), 'utf8')
   
   app.get('*', (req, res) => {
     // 这里生成动态的服务端数据，比如从session、数据库获取
     const serverData = JSON.stringify({
       userId: req.session?.userId || null,
       currentRequestTime: new Date().toISOString()
     })
     // 替换模板里的占位符
     const finalHtml = htmlTemplate.replace('{{SERVER_DATA_PLACEHOLDER}}', serverData)
     res.send(finalHtml)
   })
   
   app.listen(3000, () => {
     console.log('服务启动在3000端口')
   })
   

3. 客户端使用动态变量
   同样，在客户端脚本里直接访问全局变量：

   console.log('当前用户ID:', window.__SERVER_DATA__.userId)
   

总结一下 #

• 静态构建、变量固定？优先用方案二（环境变量），最省心；
• 构建时需要传入自定义参数？用方案一（html-webpack-plugin模板参数）；
• 变量需要随请求动态变化？用方案三（服务端运行时替换）。

内容的提问来源于stack exchange，提问作者Post Self