非法标签名。使用'&lt;‘来打印'<’。关于nuxt项目

Question

所以我有一个nuxt3项目，它使用一个名为dsv的汇总插件，我认为在这个项目中安装了vite错误，因为当我试图构建它来生产它时，它会给我一个错误，这里是github项目，如果它有帮助，我不知道为什么会这样。

我试着在vite配置中删除vue插件，但是在构建到生产时，我得到了不同的错误Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })，但是在使用npm run dev时没有得到任何错误，就像我有它时一样。

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

错误信息：

 ERROR  Illegal tag name. Use '&lt;' to print '<'.                                                            11:58:36


 ERROR  [vite:vue] Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).
file: C:/Users/maia/Desktop/lboxdroulette/nuxt-app/app.vue:22:64


 ERROR  Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).

  at createCompilerError (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:18:19)
  at emitError (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1566:29)
  at parseAttributeValue (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1454:13)
  at parseAttribute (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1330:17)
  at parseAttributes (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1286:22)
  at parseTag (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1175:17)
  at parseElement (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1104:21)
  at parseChildren (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:933:28)
  at Object.baseParse (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:848:23)
  at Object.parse (node_modules\@vue\compiler-dom\dist\compiler-dom.cjs.prod.js:3034:25)

尝试过基苏的回答，但现在我在TringtoBuildfor产时得到了一个不同的错误，我提到了我在修改vite配置文件时得到的错误，仍然不确定为什么，但是当使用for时，它不再给出任何错误。

// nuxt.config.ts
// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import dsv from '@rollup/plugin-dsv'
 
export default defineNuxtConfig({
    vite: {
        plugins: [dsv()]
    },
    modules: ['@nuxtjs/tailwindcss'],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            }
        }
    },
    css: ['@/assets/css/main.css',],
})

 ERROR  Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })   14:55:38
return __returned__
}

})
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
const _hoisted_2 = { class: "header" }
const _hoisted_3 = { class: "header-items" }
const _hoisted_4 = { class: "flex flex-1 h-fit" }
const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
}
const _hoisted_10 = { class: "boxx p-5" }
const _hoisted_11 = { class: "flex items-center mb-4" }
const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class=\"font-light text-sm mb-2\">Inspired by <a href=\"https://www.nytimes.com/games/wordle/index.html\">Wordle</a> and <a href=\"https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/\">this list</a>.</p><p class=\"font-light text-sm mb-2\">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class=\"font-light text-sm mb-2\">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
}
const _hoisted_17 = { class: "boxx p-5" }
const _hoisted_18 = { class: "flex items-center mb-4" }
const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", _hoisted_2, [
      _createElementVNode("div", _hoisted_3, [
        _createElementVNode("div", _hoisted_4, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/info.svg",
            class: "icon",
            onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
          })
        ]),
        _hoisted_5,
        _createElementVNode("div", _hoisted_6, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/settings.svg",
            class: "icon",
            onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
          })
        ])
      ])
    ]),
    _createElementVNode("div", _hoisted_7, [
      _createElementVNode("div", _hoisted_8, [
        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
          return (_openBlock(), _createBlock($setup["Card"], {
            film: film,
            i: i,
            key: i,
            onFlip: $options.grayFilm
          }, null, 8, ["film", "i", "onFlip"]))
        }), 128))
      ]),
      _createElementVNode("div", {
        class: _normalizeClass(["button my-6", { '")


 ERROR  [nuxt:dynamic-base-path] Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })
return __returned__
}

})
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
const _hoisted_2 = { class: "header" }
const _hoisted_3 = { class: "header-items" }
const _hoisted_4 = { class: "flex flex-1 h-fit" }
const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
}
const _hoisted_10 = { class: "boxx p-5" }
const _hoisted_11 = { class: "flex items-center mb-4" }
const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class=\"font-light text-sm mb-2\">Inspired by <a href=\"https://www.nytimes.com/games/wordle/index.html\">Wordle</a> and <a href=\"https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/\">this list</a>.</p><p class=\"font-light text-sm mb-2\">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class=\"font-light text-sm mb-2\">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
}
const _hoisted_17 = { class: "boxx p-5" }
const _hoisted_18 = { class: "flex items-center mb-4" }
const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", _hoisted_2, [
      _createElementVNode("div", _hoisted_3, [
        _createElementVNode("div", _hoisted_4, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/info.svg",
            class: "icon",
            onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
          })
        ]),
        _hoisted_5,
        _createElementVNode("div", _hoisted_6, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/settings.svg",
            class: "icon",
            onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
          })
        ])
      ])
    ]),
    _createElementVNode("div", _hoisted_7, [
      _createElementVNode("div", _hoisted_8, [
        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
          return (_openBlock(), _createBlock($setup["Card"], {
            film: film,
            i: i,
            key: i,
            onFlip: $options.grayFilm
          }, null, 8, ["film", "i", "onFlip"]))
        }), 128))
      ]),
      _createElementVNode("div", {
        class: _normalizeClass(["button my-6", { '")
file: C:/Users/maia/Desktop/lboxdroulette/nuxt-app/app.vue


 ERROR  Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })   14:55:38
return __returned__
}

})
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
const _hoisted_2 = { class: "header" }
const _hoisted_3 = { class: "header-items" }
const _hoisted_4 = { class: "flex flex-1 h-fit" }
const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
}
const _hoisted_10 = { class: "boxx p-5" }
const _hoisted_11 = { class: "flex items-center mb-4" }
const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class=\"font-light text-sm mb-2\">Inspired by <a href=\"https://www.nytimes.com/games/wordle/index.html\">Wordle</a> and <a href=\"https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/\">this list</a>.</p><p class=\"font-light text-sm mb-2\">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class=\"font-light text-sm mb-2\">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
}
const _hoisted_17 = { class: "boxx p-5" }
const _hoisted_18 = { class: "flex items-center mb-4" }
const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", _hoisted_2, [
      _createElementVNode("div", _hoisted_3, [
        _createElementVNode("div", _hoisted_4, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/info.svg",
            class: "icon",
            onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
          })
        ]),
        _hoisted_5,
        _createElementVNode("div", _hoisted_6, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/settings.svg",
            class: "icon",
            onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
          })
        ])
      ])
    ]),
    _createElementVNode("div", _hoisted_7, [
      _createElementVNode("div", _hoisted_8, [
        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
          return (_openBlock(), _createBlock($setup["Card"], {
            film: film,
            i: i,
            key: i,
            onFlip: $options.grayFilm
          }, null, 8, ["film", "i", "onFlip"]))
        }), 128))
      ]),
      _createElementVNode("div", {
        class: _normalizeClass(["button my-6", { '")

  return __returned__
  }

  })
  import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

  const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
  const _hoisted_2 = { class: "header" }
  const _hoisted_3 = { class: "header-items" }
  const _hoisted_4 = { class: "flex flex-1 h-fit" }
  const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
  const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
  const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
  const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
  const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
  }
  const _hoisted_10 = { class: "boxx p-5" }
  const _hoisted_11 = { class: "flex items-center mb-4" }
  const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
  const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class=\"font-light text-sm mb-2\">Inspired by <a href=\"https://www.nytimes.com/games/wordle/index.html\">Wordle</a> and <a href=\"https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/\">this list</a>.</p><p class=\"font-light text-sm mb-2\">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class=\"font-light text-sm mb-2\">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
  const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
  }
  const _hoisted_17 = { class: "boxx p-5" }
  const _hoisted_18 = { class: "flex items-center mb-4" }
  const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
  const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
  _createElementVNode("div", _hoisted_2, [
  _createElementVNode("div", _hoisted_3, [
  _createElementVNode("div", _hoisted_4, [
  _createElementVNode("img", {
  src: "/__NUXT_BASE__/assets/info.svg",
  class: "icon",
  onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
  })
  ]),
  _hoisted_5,
  _createElementVNode("div", _hoisted_6, [
  _createElementVNode("img", {
  src: "/__NUXT_BASE__/assets/settings.svg",
  class: "icon",
  onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
  })
  ])
  ])
  ]),
  _createElementVNode("div", _hoisted_7, [
  _createElementVNode("div", _hoisted_8, [
  (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
  return (_openBlock(), _createBlock($setup["Card"], {
  film: film,
  i: i,
  key: i,
  onFlip: $options.grayFilm
  }, null, 8, ["film", "i", "onFlip"]))
  }), 128))
  ]),
  _createElementVNode("div", {
  class: _normalizeClass(["button my-6", { '")
  at MagicString._splitChunk (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:895:10)
  at MagicString._split (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:885:43)
  at MagicString.overwrite (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:668:8)
  at /C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:1052:11
  at Array.forEach (<anonymous>)
  at MagicString.replace (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:1050:12)
  at Object.transform (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/dist/index.mjs:200:11)
  at node_modules\rollup\dist\shared\rollup.js:22834:37

error Command failed with exit code 1.

Answer 1

标题中的错误来自以下事实：

import vue from '@vitejs/plugin-vue'

在Nuxt项目中是多余的，其余的可能来自于以下所做的导入

import csv from "./assets/film_list.csv";

而不是

import csv from "~/assets/film_list.csv";

更多信息可以在文献资料上找到。

好吧，我只是花了太多的时间清理你的项目。

那里做错了很多事。

因此，是的，不确定这是否是某种形式的列表，但这里有一个差异(不包括增加)，有一些清洁和工作。

​

​

回购可以在这里获得：https://github.com/kissu/lboxd-roulette/tree/main

Answer 2

继之前提供给您的回答之后，我使用了@rollup/plugin-dsv --甚至tho 其他变换也存在(可能更灵活，并提供更好的支持)。

所以，在yarn add -D @rollup/plugin-dsv之后，我已经在nuxt.config.ts中设置了这个配置

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import dsv from '@rollup/plugin-dsv'

export default defineNuxtConfig({
  vite: {
    plugins: [dsv()]
  }
})

如您所见，可以将vite配置直接传递给Nuxt文件。

然后，使用以下film_list.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

就像这样工作得很好

<script setup>
import csv from './film_list.csv'
console.log('csv', csv)
</script>

<template>
  <pre>{{ csv }}</pre>
</template>

并且在yarn generate中也产生了非常好的结果。

您可以在Netlify上看到一个实时版本。

​

​

下面是一个Github回购，它复制了一个工作的设置。