vue.config.js 配置图片cdn异常

[tangerball]

trafficstars

vue2 cil创建的项目

vue.config.js

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    // 处理图片路径
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: -1,
        // 根据环境使用cdn或相对路径
        publicPath: 'http://cdn.com/',
        // 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
        outputPath: 'static/images',
        // 配置打包后图片文件名
        name: '[name].[ext]',
      })
      .end()

    config.resolve.alias.set('@', path.join(__dirname, '/src')).set('~', path.join(__dirname, '/'))
  },
}

页面内容 pages/index/index.vue

<template>
  <view class="animate__animated animate__bounceIn">
    <image class="logo" src="@/static/images/logo.png"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onShow() {},
  onLoad() {},
  methods: {},
}
</script>

编译后 src被替换为空

    <uni-page-wrapper>
      <uni-page-body>
        <uni-view>
          <uni-image class="logo">
            <div
              style="
                background-image: none;
                background-repeat: no-repeat;
                background-position: 0% 0%;
                background-size: 100% 100%;
              "
            ></div>
            <!---->
          </uni-image>
        </uni-view>
      </uni-page-body>
    </uni-page-wrapper>

如何配置我需要的效果内容，不想更改manifest.json中的publicPath的路径，因为需要兼容到小程序上引用cdn图片资源

[bfc846958672]

可以通过条件编译来 动态调整manifeat.json 里面的publicPath路径

[tangerball]

可以通过条件编译来 动态调整manifeat.json 里面的publicPath路径

我只需要对图片进行cdn，其余的内容不需要去动。还有就是publicPath现在只针对H5有用的吧

[tangerball]

vue.config

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('@', path.join(__dirname, 'src')).set('~', path.join(__dirname, '.'))
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: -1,
                // 关闭ES模块语法
                esModule: false,
                // 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
                outputPath: 'static/images',
                // 配置打包后图片文件名
                name: '[name].[ext]',
                // 关闭图片base64编码
                encoding: false,
                // 根据环境使用cdn或相对路径
                publicPath: "http://cdn.com",
              },
            },
          ],
          type: 'javascript/auto',
        },
      ],
    },
  },
}

webpack5 需要配置type: 'javascript/auto' , publicPath 注意配置为根路径或域名。 现在实验只能对H5生效，不兼容小程序。 小程序上有方案么嘛？

[bfc846958672]

你现在写的url-loader配置针对图片在开发环境不生效，还是正式环境不生效？

url-loader的publicPath 可以是一个函数，你在函数内判断是否为开发环境，还是正式环境。

 publicPath: function(url) {
                   // 判断是否为生产环境并且将图片路径替换为 CDN 路径
                   if (process.env.NODE_ENV === 'production') {
                     return 'https://your-cdn-url.com/images/' + url;
                   } else {
                     return './images/' + url;
                   }
                 }

[tangerball]

你现在写的url-loader配置针对图片在开发环境不生效，还是正式环境不生效？

url-loader的publicPath 可以是一个函数，你在函数内判断是否为开发环境，还是正式环境。

 publicPath: function(url) {
                   // 判断是否为生产环境并且将图片路径替换为 CDN 路径
                   if (process.env.NODE_ENV === 'production') {
                     return 'https://your-cdn-url.com/images/' + url;
                   } else {
                     return './images/' + url;
                   }
                 }

我上面是示例来着，我自己的代码上是有判断环境进行替换CDN路径。现在是问题是这个url-loader 只能对H5有效果，小程序下的内容是不会替换的。有办法让它在小程序上也能替换嘛？

[bfc846958672]

publicPath目前支持h5，小程序和app不支持publicPath， 你可以通过运行时函数的方式来调整图片路径。 比如

function imageUrl(url) {
   if (process.env.NODE_ENV === 'production') {
     return 'https://your-cdn-url.com/images/' + url;
   } else {
     return './images/' + url;
   }
}
// template
<image :src="imageUrl('xxx.png')">

[bfc846958672]

长时间未响应，关闭本issue。 如还有问题，可 reopen issue 继续讨论。

[tangerball]

publicPath目前支持h5，小程序和app不支持publicPath， 你可以通过运行时函数的方式来调整图片路径。 比如

function imageUrl(url) {
   if (process.env.NODE_ENV === 'production') {
     return 'https://your-cdn-url.com/images/' + url;
   } else {
     return './images/' + url;
   }
}
// template
<image :src="imageUrl('xxx.png')">

此方案太过于麻烦了，希望能提供更简洁方案。