VueJS:为 dev 模式和生产模式设置 img src 链接

Question

在我的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'),
}
}

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

Answer 1

您可以通过以下方式引用资产：

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

Answer 2

执行以下操作：

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

我希望它有所帮助