Vue2中模板无法访问process.env的原因及解决方法

原因解析 #

Vue 模板的执行作用域是当前 Vue 实例，模板里引用的变量默认只能是实例自身的属性、方法，或者全局挂载到实例上的内容。

process 是 Node.js 的全局对象，Vue CLI 通过 webpack 的 DefinePlugin 在JS脚本编译阶段，把 process.env.VUE_APP_* 这类变量替换成具体的字符串值（比如把 process.env.VUE_APP_test 替换成 'hello'），但这个替换只在 .js 文件、.vue 的 <script> 部分生效。

模板的编译逻辑不同，webpack 不会对模板里的 process.env 做替换，Vue 会把它当成实例上的属性去查找，自然找不到，所以抛出警告。而 main.js 是 JS 脚本，编译时完成了变量替换，因此能正常使用。

解决方法 #

方法1：组件内暴露环境变量给模板

在组件的 <script> 里把环境变量赋值给 data 或 computed 属性，模板直接引用这个属性：

<template>
  <div id="app">
    {{ testEnv }}
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testEnv: process.env.VUE_APP_test
    }
  }
}
</script>

方法2：全局挂载环境变量（多组件共用场景）

把需要的环境变量挂载到 Vue 原型上，所有组件模板都能通过 $xxx 访问：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 可挂载单个变量，也可挂载整个process.env（不建议，会打包多余内容）
Vue.prototype.$env = process.env

new Vue({
  render: h => h(App),
}).$mount('#app')

模板中使用方式：

<template>
  <div id="app">
    {{ $env.VUE_APP_test }}
  </div>
</template>

方法3：通过 vue.config.js 全局注入变量

在项目根目录的 vue.config.js 里，用 webpack 的 DefinePlugin 把变量直接注入全局，让模板可直接访问：

const webpack = require('webpack')
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // 注意要转成字符串，否则会被当成变量解析
        'VUE_APP_test': JSON.stringify(process.env.VUE_APP_test)
      })
    ]
  }
})

之后模板里直接写 {{ VUE_APP_test }} 即可访问。

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