如何在Vue.js中导入和使用本地的.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':'Parasite','year':'2019','href':'parasite-2019','src':'film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg'}]

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

[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.

- maia

Answer 1

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

npm i -D @rollup/plugin-dsv

...并配置Vite使用它：

// 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(), 
  ],
})

然后导入一个 .csv 文件会生成对象数组，就像你所期望的那样：

<script>
// MyComponent.vue
import csv from './filmList.csv'
console.log(csv) // => [{'name':'Parasite','year':'2019','href':'parasite-2019','src':'film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg'}]
</script>

demo

- tony19