vue-cli 5设置打包时图片不转base64
时间: 2024-09-10 15:16:34 浏览: 17
Vue CLI 5 中设置打包时不将图片转为 base64 可以通过修改配置文件 `vue.config.js` 来实现。首先,你需要找到 `publicPath` 或者 `assetPublicPath` 配置,这两个选项控制静态资源(包括图片)的URL路径。
在 `vue.config.js` 文件中,添加或修改以下内容:
```javascript
module.exports = {
//...
publicPath: process.env.NODE_ENV === 'production'
? '/your-image-url-prefix/' // 使用自定义的 URL前缀
: '/', // 开发环境使用默认的 /
outputDir: 'dist', // 输出目录
// 如果你想让所有图片都不转换为 base64,可以移除或注释下面这行
// chainWebpack: config => {
// config.module.rule('images')
// .use('url-loader')
// .tap(options => {
// options.test = /\.(png|jpe?g|gif)$/i;
// options.include = path.resolve(__dirname, './src/images');
// optionsesModule: false; // 这一行阻止 base64 转换
// options.format = 'auto'; // 自动根据文件大小选择处理方式,默认会转 base64
// });
// },
};
```
确保替换掉 `/your-image-url-prefix/` 为你实际需要的图片URL前缀。如果不需要对特定目录下的图片做特殊处理,那么去掉或注释掉 `chainWebpack` 中关于 `url-loader` 的配置即可。