问题:开发环境图片显示,打包后图片不显示,注意是图片路径引用错误;
解决:
Ts封装公共类
//获得图片路径
export const getImgUrl= (url:string) => {
return new URL(url, import.meta.url).href;
}
使用图片
import yyLogo from "@/assets/images/yyLogo.png";
import {getImgUrl} from "@/api/zzj/utils.ts";
const yyLogoUrl = getImgUrl(yyLogo);
<img style="width: 70px; height: 70px;" :src="yyLogoUrl" alt=""/>
<van-button type="primary"
class="NO1Row"
style="background: radial-gradient(circle, #34966c, #66c77a);color: white"
@click="getRecharge(inpatientServeList[0])"
:icon="drghUrl"
>
配置build
vue.config.ts
build: {
// 混淆器设置
minify: "terser",
// 不生成source map文件,默认false
sourcemap: false,
// 指定输出路径(相对于项目根目录),默认dist
outDir: "dist",
// 指定生成静态资源的存放路径,默认assets
assetsDir: "assets",
// chunk大小警告限制,默认500kbs
chunkSizeWarningLimit: 1500,
// 是否禁用css拆分(默认true),设置false时所有CSS将被提取到一个CSS文件中
cssCodeSplit: true,
// 简要配置
terserOptions: {
compress: {
// 移除console
drop_console: true,
// 移除debugger
drop_debugger: true,
},
// 保留类名
keep_classnames: true,
format: {
// 移除所有的注释
comments: false,
},
},
// js、css等文件打包到不同文件夹
rollupOptions: {
output: {
// 自定义 chunk 文件的输出路径和文件名格式
chunkFileNames: "assets/js/chunk/[name]-[hash].js",
// 自定义 entry chunk 的输出路径和文件名格式
entryFileNames: "assets/js/entry/[name]-[hash].js",
//非js文件夹,按照文件类型分类css,png,jpg
assetFileNames: "assets/[ext]/[name]-[hash].[ext]"
}
}
},