如何使用require将域从环境变量注入vuejs

Question

我有一个特殊的用例，需要在html端呈现图像的完整url。前任；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">

但假设我的领域是示例。com，以下是我想要的结果：

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

我不想在模板中硬编码任何东西。我想使用一个环境变量，这样我就可以在构建vue包时注入域：

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

一些相关留档：

• vue加载程序资源url

Answer 1

你很接近。

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

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

我猜对于生产环境和开发环境，您有不同的npm脚本。在webpack 4中，您可以使用使用模式。

了解更多有关环境的信息。