如何使用require将环境变量中的域注入vuejs答案

【问题标题】：How to inject domain from environment variable into vuejs with require如何使用require将环境变量中的域注入vuejs
【发布时间】：2019-02-28 15:30:50
【问题描述】：

我有一个特殊的用例，我需要图像的完整 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,
      };
    },
  };

一些相关文档：

【问题讨论】：

经过一番搜索，我发现了以下问题：github.com/webpack-contrib/file-loader/issues/290，建议的解决方案似乎是正确的。我会试一试，并会在这里更新。
好的，我可以确认执行'http://localhost:8081' + require(`../assets/large_image.png`) 之类的操作确实有效，但我发现较小的图像正在转换为 base64 编码的内联图像，因此这可能会导致其他问题。
以下解决方案也有效，并且不需要环境变量：let url = window.location.protocol + "//" + window.location.host; 后跟url + require(`../assets/large_image.png`)。来源：css-tricks.com/snippets/javascript/…
我的回答解决了你的问题吗？如果是，请接受它:)
感谢您的回答，但我选择了my comment here instead 并使用了window.location.host。我不想硬编码域，我只想要完整的 url，因为它是一个任何人都可以从任何地方运行的工具，并且没有预定义的生产 url。不太清楚为什么，但是节点进程没有抓住我的process.env.BASE_URL，我没有进一步挖掘，但我可以使用window.location.host。

标签： vue.js environment-variables webpack-file-loader

【解决方案1】：

你已经很接近了。

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

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

我猜你对于production 环境和development 环境有不同的npm 脚本。在 webpack 4 中，你可以使用 mode。