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

Answer 2

您可以为>>> table.max_table_width = 150创建别名，并根据环境在转换时更改网址：

/src/images

Answer 3

处理此问题的另一种方法是使用DefinePlugin创建每个图像都引用的全局变量。

module.exports = {
  chainWebpack: config => {
    console.log('\n')
    console.log('Setting global variables:')
    console.log(`__YOUR_GLOBAL_CONSTANT__: ${JSON.stringify(process.env.YOUR_GLOBAL_CONSTANT)}`)
    console.log('\n')

    config
      .plugin('provide')
      .use(require('webpack').DefinePlugin, [{
        __YOUR_GLOBAL_CONSTANT__: JSON.stringify(process.env.YOUR_GLOBAL_CONSTANT)
      }])
  }
}

上面的示例使用了vue.config.js file，但是策略应该非常相似。另外，如果您使用的是eslint之类的东西，则需要在globals部分中将变量指定为readonly。

Answer 4

Vue-loader已预先配置为可以see here处理Vue单个文件组件中的src个属性。因此，例如模板中的<img src="../image.png">被转换为：

createElement('img', {
  attrs: {
    src: require('../image.png') // this is now a module request
  }
})

Webpack对此require的处理方式取决于配置的加载程序。通常，配置了file-loader。看起来像这样（来自Vue CLI生成的项目+简化的）：

module: { 
  rules: [
    {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
  ]
}

Loader负责将文件复制到dist目录中并返回公共URI，该公共URI将插入到src属性中。

因此，您可以通过指定正确的options在此处配置所需的内容。例如：

options: {
  name: 'images/[name].[ext]'
  publicPath: isDev ? __webpack_public_path__ : 'https://my-cdn.net/'
}

仅需在构建后获取dist/images目录的内容并进行部署，以便https://my-cdn.net/images可以访问它，并且它应该可以工作。...

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

4 个答案: