我如何在 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':'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.

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

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

how can i import and use a local .csv file in vuejs

csv

vue.js

nuxt.js

vite