Vue项目如何将服务端process.env变量的值传递到浏览器端

根据你的使用场景，可以选择以下两种常用实现方式：

• 常规客户端渲染项目（无SSR，用Vue CLI/Vite构建）
  你可以在构建配置文件中先读取自定义路径的环境变量，再通过框架自带的全局注入能力将变量打进客户端代码包：

  • Vue CLI 配置示例（vue.config.js）：

    // 配置文件顶部先读取自定义.env文件
    require("dotenv").config( { path: '/hw/.env', debug: true } )
    const { defineConfig } = require('@vue/cli-service')
    const webpack = require('webpack')
    
    module.exports = defineConfig({
      configureWebpack: {
        plugins: [
          new webpack.DefinePlugin({
            // *注意必须用JSON.stringify包裹变量值，否则客户端会把注入的内容当成变量名而非字符串，引发语法错误
            'process.env.MYVAR': JSON.stringify(process.env.myvar)
          })
        ]
      }
    })
    

    配置完成后，客户端代码可以直接通过process.env.MYVAR读取值。
  • Vite 配置示例（vite.config.js）：

    // 配置文件顶部先读取自定义.env文件
    require("dotenv").config( { path: '/hw/.env', debug: true } )
    import { defineConfig } from 'vite'
    
    export default defineConfig({
      define: {
        'import.meta.env.MYVAR': JSON.stringify(process.env.myvar)
      }
    })
    

    配置完成后，客户端代码可以直接通过import.meta.env.MYVAR读取值。

• SSR（服务端渲染）项目
  你的代码中包含process.env.SERVER判断，符合SSR场景特征，你可以在服务端拼接返回HTML的时候，将变量挂载到window全局对象传递给客户端：

  if(!!process.env.SERVER) {
    require("dotenv").config( { path: '/hw/.env', debug: true } )
    const myvar = process.env.myvar
    // 渲染HTML模板时插入全局变量声明脚本
    const html = `
  

` } ``` 客户端代码可以直接通过`window.MYVAR`读取对应值。

注意：不要把密码、密钥等敏感环境变量传递到客户端，浏览器端的所有全局变量都是公开可查的。

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