VueJS：为开发模式和生产模式设置 img src 链接答案

【问题标题】：VueJS: Setting img src links for dev mode and production modeVueJS：为开发模式和生产模式设置 img src 链接
【发布时间】：2020-03-27 03:07:13
【问题描述】：

在我的 Vue.js 应用中加载图像时遇到问题。

鉴于我有：

<img :src="imgSrc" />

这适用于开发模式：

data() {
  return {
    imgSrc: require('../assets/MyLogo.png'),
  }
}

这在生产模式下有效：

data() {
  return {
    imgSrc: '/sites/burnley/assets/MyLogo.png',
  }
}

但是我怎样才能进行此设置，以便在为生产构建时可以使用相同的代码库而无需注释输入/输出行？

补充：我试过这个：

data() {
  return {
    imgSrc: this.prodMode ? '/sites/burnley/assets/MyLogo.png' : require('../assets/MyLogo.png'),
  }
}

但这根本没有给我任何链接。

【问题讨论】：

【解决方案1】：

您可以这样引用资产：

require('@/assets/MyLogo.png');

【讨论】：

这在开发模式下工作正常，但不适用于我需要不同路径的生产模式。
看起来很奇怪..您是否为生产构建了站点并将 public 称为生产中的根目录？
适用于开发人员，但是当我为生产构建时，它给了我错误的路径（它将'/assets/MyLogo.png' 连接到 vue.config.js 中的publicPath 设置）

【解决方案2】：

执行以下操作：

data() {
  return {
    imgSrc: process.env.NODE_ENV === 'production' ? '/sites/burnley/assets/MyLogo.png' : require('../assets/MyLogo.png'),
  }
}

希望对你有帮助

【讨论】：