如何在 vuejs 中导入并使用本地 .csv 文件

Question

我在这个结构中有一个 csv 文件

name,year,href,src
Parasite,2019,parasite-2019,film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg

我想将此文件作为列表导入，每行作为字典，如下所示：

name,year,href,src
Parasite,2019,parasite-2019,film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg

我尝试在标签import csv from './filmList.csv'内部使用<script>，但这只会在加载时给我一个错误：

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .csv file format.

Answer 1

@rollup/plugin-dsv作为开发依赖项安装：

npm i -D @rollup/plugin-dsv

...并配置 Vite 以使用它：

npm i -D @rollup/plugin-dsv

然后导入.csv文件将生成对象数组，正如您所期望的：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dsv from '@rollup/plugin-dsv' 

export default defineConfig({
  plugins: [
    vue(),
    dsv(), 
  ],
})

演示