如何使用 webpack 和 vue-loader 更改 .vue 文件中 <img> 的 src 属性？

Question

我有一个使用 webpack（版本 3.6.0）和 vue-loader（版本 13.0.5）构建的 vue.js（版本 2.4.4）应用程序。

在 .vue 文件中，我需要<img>根据我的应用程序的环境修改标签的 src 属性中包含的 url 。

• 在开发环境中，图片必须来自应用程序文件夹，有一个相对路径：“/src/images/exemple.png”
• 生产环境下，图片必须来自cdn，绝对路径：“ https://my-cdn.net/images/exemple.png ”

在“webpack.config.js”文件中，我已经使用“process.env.NODE_ENV”区分了不同的环境，如下所示：

const isDev = process.env.NODE_ENV === 'dev';

但我不知道如何使用 vue-loader（或其他东西）修改 .vue 文件中 img 标签的 src 属性。

有关信息，这里是“webpack.config.js”文件中 vue-loader 的定义：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      'scss': [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  }
}

有没有一种简单的方法可以做到这一点？

Answer 1

您可以根据环境创建别名/src/images并在转译时更改 url：

{
//..
  resolve: {
    alias: {
      '/src/images': isDev ? '/src/images' : process.env.IMAGE_CDN + '/images'
    }
  }
}