Question

我有一个特殊的用例，我需要图像的完整URL才能在html一侧呈现。例如； Facebook Open Graph要求完整的图像URL才能正常工作，相对图像或绝对路径将不起作用。

我目前正在使用@ vue / cli和Typescript。我有以下组件：

example.vue

<template>
  <div id="example">
    <img :src="exampleIcon" alt="Example"/>
  </div>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        exampleIcon: require(`../assets/exampleIcon.png`),
      };
    },
  };
</script>

上面的效果很好，它产生了一个img标签，结果如下：

<img src="/img/exampleIcon.8d0b1a90.png" alt="Example">

但是假设我的域名是example.com，这就是我想要的结果：

<img src="https://example.com/img/exampleIcon.8d0b1a90.png" alt="Example">

我不想对模板中的任何内容进行硬编码。我想使用环境变量，以便在构建vue捆绑包时注入域：

export default {
    data() {
      return {
        baseUrl: process.env.BASE_URL,
      };
    },
  };

一些相关文档：

Answer 1

您非常接近。

不要从环境变量中获取baseUrl的值，而是根据您为以下应用程序构建当前应用程序的环境来设置值：

data() {
  return {
    baseUrl: process.env.NODE_ENV == 'production'? "https://example.com" : 'http://localhost:8081'
  }

我想您在production环境和development环境中有不同的npm脚本。在webpack 4中，可以使用use OpenCV documentation。

mode。

如何使用require

1 个答案: