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

发布于04月28日

我在这个 struct 中有一个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

我想以列表的形式导入此文件，每行以dict的形式导入:

[{'name':'Parasite','year':'2019','href':'parasite-2019','src':'film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg'}]

我try 在<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.

推荐答案

安装@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