如何将域从环境变量注入 vuejs 并带有 require

Question

我有一个特殊的用例，我需要图像的完整网址才能在html端呈现。前任;Facebook Open Graph 需要完整的图片网址才能正常工作，相对图片或绝对路径不起作用。

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

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

一些相关文档：

• vue-loader asset-url
• 文件加载器

Answer 1

你已经很接近了。

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

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

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

阅读有关环境的更多信息。