vite vue-cli 讀取檔案原始內容 使用base64內容的檔案

新建檔案 img.dataurl 中存放圖片base64

<img class='img' :src='dataurl' alt='' />
import  dataurl from './img.dataurl'
data(){
return {
dataurl:dataurl
}
}
vue.config.js
module.exports=defineConfig({
configureWebpack:{
  module:{
  rules:[
  {
   test:/\.dataurl$/,
   loader:'raw-loader'
  }
  ]
  }
}
})
npm i raw-loader -D

vue-cli

webpack

​ *.js js-loader

*.css css-loader

*.png file-loader

*.dataurl raw-loader

vite

<img class='img' :src='dataurl' alt='' />
import dataurl from './img.dataulr?raw'