vue3.0 + vite 动态使用静态资源文件

583 阅读1分钟

1、定义共用的静态资源路径

// utils/index.ts

export const pubilcPath = (url: string): string => {
  return process.env.NODE_ENV === 'production'
    ? path.join((process as any).resourcesPath, '/public/static' + url)
    : path.join('/public/static' + url)
}

2、动态资源的文件地址 // public/static

3、使用

import { pubilcPath } from '@/utils'
const url = pubilcPath('/images/svga/mvp.png')

4、使用vite打包复制src/assets/images 的静态资源到pubilc 利用 插件 rollup-plugin-copy

    npm i rollup-plugin-copy -D

// vite.config.ts
export default defineConfig({
    plugins: [
        copy({
          targets: [
            { src: 'public/assets/images/*', dest: 'dist/assets/images' }
          ],
          verbose: true
        })
    ]
})