javascript - 无法使用 NuxtJS + Vite 加载 SVG
问题描述
我无法使用@nuxtjs/svg
. 我已经在nuxt.config.js
文件中正确添加了构建模块,但它们仍然没有加载。我看到一些开发人员抱怨这可能是由于 ViteJS,所以我也添加了vite-svg-loader
依赖项,但我有这个错误:
__vite_ssr_import_0__.createElementVNode is not a function
这是我的nuxt.config.js
文件
import svgLoader from 'vite-svg-loader'
import { APP_NAME, APP_LANG, APP_ROOT_ID } from "./constants";
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: APP_NAME,
htmlAttrs: {
lang: APP_LANG,
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
globals: {
id: globalName => APP_ROOT_ID,
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'@/assets/styles/main.scss',
'@/assets/styles/variables.scss',
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: {
dirs: [
'~/components',
'~/components/pages',
'~/components/ui',
],
},
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
'@nuxtjs/svg',
'@nuxtjs/style-resources',
'nuxt-vite'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extend(config, ctx) {
config.module.rules.push({
test: /\.svg$/,
loader: 'file-loader',
});
},
},
styleResources: {
scss: '@/assets/styles/mixins.scss',
},
vite: {
ssr: false,
plugins: [svgLoader()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/mixins.scss";',
},
},
},
},
}
这是我加载 SVG 的方式:
图标.vue
<template>
<component :is="icon"/>
</template>
<script>
import * as icons from "~/assets/images/icons";
export default {
props: [ 'name' ],
computed: {
icon() {
return icons[this.name]
}
},
}
</script>
用法 :
<template>
<Icon name='add' />
</template>
此致,
解决方案
推荐阅读
- python - Thonny ide 中的语法错误没有错,为什么?
- laravel - 无法让 laravel 在 Azure Web App Linux 上运行
- javascript - 将值传递给隐藏输入
- jquery - 根据索引将类添加到每个子 div
- python - “方法”对象在 python 中不可子脚本
- ruby - 在基类中实现工厂时,从派生类中封装工厂方法的正确方法是什么?
- python - 从数据库中的文本导出数据
- c# - 将多个不同的模型映射到单个视图模型中 - AutoMapper
- uml - 如何设计一个可以在其他项目中复用的类
- temenos-quantum - 如何更改段控制器中标签的文本颜色?