如何在 Vue3 Vite 中修复我在生产中缺少动态图像？答案

【问题标题】：How fix in Vue3 Vite I got missing dynamic images in production?如何在 Vue3 Vite 中修复我在生产中缺少动态图像？
【发布时间】：2022-07-14 12:02:39
【问题描述】：

我正在迁移到 Vue3 和 Vite，但在构建版本时遇到了一些问题，其中缺少一些图像。

这些丢失的图片是动态的，是这样加载的：

使用帖子导入 JSON 数据；该模板有一个图像，该图像具有一个动态 src 调用一个返回路径/url的方法代码模板：

<img :src=“cover(post)”>

方法：

 cover(post){
  const url = "../images/news/"+post.cover;    
  const imgUrl = new URL(url, import.meta.url).href;
  return imgUrl;
}

代码三是这样的：

root -
   - dist/
          - assets (it includes JS, CSS and images with a replaced filename)
          - index.html
   - public
   - data / with JSON
   - src -
         - CSS
         - images/news/covers
         - pages  / it includes my current page
         - components / it includes my current template
         - APP.vue
         - router.js

Vite 配置是

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: /^~.+/,
        replacement: (val) => {
          return val.replace(/^~/, "");
        },
      },
      {
        find: 'tailwind.config.js',
        replacement: () => './src/css/tailwind.config.js',
      }
    ],
  },
  optimizeDeps: {
    include: [
      'tailwind.config.js',
    ]
  }
})

错误：

代码在 dev (localhost:3000) 上也能正常工作，但构建后的生产显示错误：

vendor.c138f1ef.js:1 类型错误：无法构造“URL”：无效的 URL 在 Proxy.cover (index.11439723.js:1)

有什么解决办法吗？

【问题讨论】：

您是否尝试删除url 变量并将字符串直接包含为URL 构造函数的第一个参数，如documentation 中所述？
感谢@MichalLevý，但同样的错误也删除了变量并使用"../images/news/"+post.cover作为第一个参数。
@MichalLevý 我做了一些测试，但没有结果。正如文档建议的那样，我已将图像移动到 /public 文件夹中。本地主机正在工作。但是生产也会出现同样的错误。我注意到构建创建了一个新文件夹（图像文件夹）int /dist，然后我将其移至生产环境。为什么我继续收到同样的错误？！
您好，您找到解决方案了吗？我有同样的错误..
@Shaci 我使用不同的方法修复它：图像保存到public/images 文件夹，然后我使用动态路径作为:src="'path/'+data_img"

标签： webpack vuejs3 vite

【解决方案1】：

根据文档，我认为它只支持字符串或模板字符串（不支持变量）。试试这个吧……

  const imgUrl = new URL(`../images/news/${post.cover}`, import.meta.url).href;

【讨论】：

【解决方案2】：

这是因为您的build.target 不支持import.meta.url。如果您要在控制台中记录import.meta.url，它将是undefined，这就是为什么它会吐出无效URL的错误。

我确实在另一个问题中回答了这个问题，请看：https://stackoverflow.com/a/72975011/14269322

【讨论】：