Как внедрить домен из переменной окружения в vuejs с помощью require - PullRequest
Новая
       4

Как внедрить домен из переменной окружения в vuejs с помощью require

0 голосов
/ 25 сентября 2018

У меня есть особый случай использования, когда мне нужен полный URL-адрес изображения для рендеринга на стороне HTML.Ex;Facebook Open Graph требует, чтобы полный URL изображения работал правильно, относительное изображение или абсолютный путь не будут работать.

В настоящее время я работаю с @ vue / cli и typcript.У меня есть следующий компонент:

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,
      };
    },
  };

Некоторая связанная документация:

1 Ответ

0 голосов
/ 25 сентября 2018

Вы довольно близки.

Вместо того, чтобы получать значение baseUrl из переменной среды, установите значение в зависимости от среды, для которой вы создаете текущее приложение: 

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

Я полагаю, у вас есть разные сценарии npm для среды production и development.В веб-пакете 4 вы можете использовать режим .

Подробнее о средах .

...