javascript - 如何使用 webpack 和 vue-loader 更改 .vue 文件中 的 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

搭载@Michael Levy的回答:
我目前在使用 Vue 3、@vue/cli 4.5.10 和 webpack 时遇到了这个问题。经过大量研究，我已经解决了。
Webpack 配置进入 vue.config.js ，那里有很多抽象。要微调控制，您可以使用 chain webpack configs .为了帮助您，请使用 Vue Inspect当您尝试通过链接访问特定加载程序时。

$ vue inspect > output.js

这将为您提供 vue-cli 正在使用的所有加载器的一个很好的列表。
例如 - 修改 vue.config.js 中的 webpack 图像选项, 你可以使用 vue inspect > output.js ，搜索 output.js文件，并发现管理图像的加载程序。
即: /* config.module.rule('images').use('url-loader') */要回答这个问题 - 在您的 vue.config.js 中

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => {

        options.name = "images/[name].[ext]";
        options.publicPath = isDev ? __webpack_public_path__ : 'https://my-cdn.net/';

        return options;
      });
  },
};