Vue组件模板中执行JavaScript？模板变量未编译问题咨询

首先明确：Vue组件模板里支持执行单个JavaScript表达式，但有语法使用规范，你之前的写法问题出在属性绑定的方式上——HTML属性里不能用双大括号{{ }}插值，得用Vue的属性绑定语法。

针对你的需求，给你几个可行的实现方案：

方案1：直接用v-bind（简写:）绑定属性 #

Vue中，要让属性值里的JS表达式生效，必须用v-bind（或简写冒号:）来绑定属性。把你的代码改成这样就行：

<template>
  <img :src="window.SETTINGS.ASSETS_PATH + 'img/foo.jpg'" />
</template>

这里:src是v-bind:src的简写，冒号后面的内容会被当作JS表达式执行，所以能正确拼接出完整的图片路径。

方案2：将全局配置注入Vue（更推荐） #

直接依赖window全局变量虽然能工作，但不符合Vue组件化的最佳实践，也不利于后续维护和测试。可以把全局配置注入到Vue生态中：

方式A：全局挂载到Vue原型 #

在你的项目入口文件（比如main.js）里添加：

Vue.prototype.$settings = window.SETTINGS;

之后在任意组件的模板或脚本里都可以用$settings访问配置：

<template>
  <img :src="$settings.ASSETS_PATH + 'img/foo.jpg'" />
</template>

方式B：组件内用计算属性封装 #

如果只是单个组件需要这个路径，也可以在组件内定义计算属性，让模板更简洁：

<template>
  <img :src="fooImageSrc" />
</template>

<script>
export default {
  computed: {
    fooImageSrc() {
      return window.SETTINGS.ASSETS_PATH + 'img/foo.jpg';
    }
  }
}
</script>

为什么你原来的写法不生效？ #

Vue的模板语法里，双大括号{{ }}只能用于文本插值（比如<div>{{ message }}</div>），不能用在HTML属性上。如果在属性里写src="{{ ... }}"，Vue会把整个{{ ... }}当作字符串处理，不会解析里面的JS表达式，所以路径自然不对。

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