小编kis*_*ssu的帖子

我想将图像 url 传递给子组件，但图像未显示。

我试过v-attr, :attr,:src属性。

页面/index.vue

<ThumbNail img-url="assets/img/igsim_intro.png"/>

组件/缩略图.vue

<!-- Failed to resolve directive: attr -->
<img v-attr="imgUrl" /> 

<!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png -->
<img :src="imgUrl" />

<img :attr="{src: imgUrl}" /> 

<script>
export default {
  name: "ThumbNail",
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

我希望Thumbnail.vue将图像显示为传递的 url。

我在 Nuxt.js 中创建了一个博客，我的文章使用 Markdown。在撰写第一篇文章时，我意识到我无法在assets文件夹中的 Markdown 文章中包含图像。仅当它是如下例所示的链接时才有效：

降价图像：

如何从该位置在 Nuxt.js Markdown 中插入图像？assets/images/blog/trees.png

我需要使用 laravel 和 nuxtjs 开发一个网站。据我所知，SSR模式是nuxtjs的高级功能之一，但它需要运行nuxt服务器。换句话说，我们需要将 laravel 部署在像 nginx 这样的服务器上，并且必须使用npm run start. 如果我们使用 SPA 模式，nuxt 会生成静态页面到 dist 目录中，我们可以简单地将其合并到 laravel 项目中，一切就完成了。我们不需要运行额外的服务器。

这是我到目前为止的看法。我不确定这是否属实，所以我无法决定选择哪一个。首先，我不确定哪个真的更好。其次，我不确定SSR模式是否真的需要运行额外的服务器。

我想得到专家的建议并做出决定。如果您就此给我建议，我将非常感激。提前致谢。

在我的 Vue 2 项目上安装 Pinia 并将其导入到 main.js 文件中后，我收到此错误

Failed to compile.

./node_modules/pinia/dist/pinia.mjs 1147:44-52
Can't import the named export 'computed' from non EcmaScript module (only default export is available)

当我使用此命令创建新的 Nuxt 3 项目时：

npx nuxi init nuxt-app

它输出这个错误：

 ERROR  (node:1752) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                         09:53:25
(Use `node --trace-warnings ...` to show where the warning was created)


 ERROR  Failed to download template from registry: fetch failed                                                                                  09:53:25

  at /C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/chunks/init.mjs:13269:11
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async downloadTemplate (/C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/chunks/init.mjs:13268:20)
  at async Object.invoke (/C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/chunks/init.mjs:13336:15)
  at async _main (/C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/cli.mjs:50:20)

我的环境：

• 操作系统：Windows 11
• 节点版本：18.12.0
• npm 版本：8.12.1

起初我怀疑这是由于我的网络造成的。但是当我尝试安装其他 npm 包时没有收到错误。

只是尝试按照配置nuxt/auth 文档向我的 NuxtJs 3 应用程序添加身份验证，但在应用程序启动期间仍然出现错误：

// nuxt.config.js

export default defineNuxtConfig({
    auth: {
        // ...
    },
    modules: [
        // '@nuxtjs/axios',
        '@nuxtjs/auth-next'
    ],
})

收到相同的错误，@nuxtjs/axios但我只是将其注释掉，因为其官方文档指示切换到$fetch API.

无法找出错误在哪里

我尝试启动 nuxt3 程序，现在我想设置服务器代理。对 http://localhost:3000/api/v1 的请求应该会从http://39.98.58.238:8594上的后端服务器返回响应，但现在它给了我一个 404 页面。

首先，我按照 vite.js 文档设置 nuxt.config.js 文件

nuxt.config.js

export default defineNuxtConfig({  
  ...  
  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'http://39.98.58.238:8594',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
    }
  },
})

页

<script setup>
  async function test() {
   await usefetch('/api/v1/xxx')
  }
</script>
<template>
  <div>
    <button @click="test">check</button>
  </div>
</template>

它不起作用，我的请求返回了 404 页面。然后我尝试遵循这个问题：text，不要使用vite代理

nuxt.config.js

export default defineNuxtConfig({
  nitro: {
    devProxy: {
        '/api/': {
            target: 'http://39.98.58.238:8594/',
            changeOrigin: true
        }
    }
  } …

我在 Nuxt (Vue) 上构建了一个 SSR 页面。有一个在浏览器中运行的简单代码。

methods: {
    submitGeneralForm() {
        alert("submit");
        console.log('teeeeeeeeeeeeeeeeeeeeest')
    }, 

SSR 意味着它在服务器上渲染站点，然后发送到浏览器。这段代码应该在浏览器中运行。与按钮点击有关。console.log()警报工作正常，但我在浏览器中看不到任何警报。不明白。这有什么问题吗？

编辑：

这是示例Github 存储库。运行yarn install +yarn dev 来重现该问题。Node 版本 v14.17.6 npm 版本 6.14.15 和 YARN 版本 1.22.11您将在包含此代码的 /layouts/default.vue 页面加载时看到alert()

export default {

    mounted() {
        alert('11111111111111');
        console.log('22222222222222');
        alert('33333333333333');
    }
};

这是控制台中 console.log() 的屏幕截图。

当我尝试使用 vue-fontawesome 框架以及 @nuxtjs/fontawesome 框架时，我遇到 Nuxtjs 错误，这是错误：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

这是我的代码nuxt.config.ts：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/fontawesome'
  ],

  fontawesome: {
    icons: {
      solid: ['faXmark']
    }
  }
})

这是我想使用图标的组件：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

顺便说一句，错误只是在我尝试加载页面时出现，而不是在运行时出现。

   \xe2\x95\xad\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xae\n   \xe2\x94\x82                                       \xe2\x94\x82\n   \xe2\x94\x82   Nuxt @ v2.15.8                      \xe2\x94\x82\n   \xe2\x94\x82                                       \xe2\x94\x82\n   \xe2\x94\x82   \xe2\x96\xb8 Environment: development          \xe2\x94\x82\n   \xe2\x94\x82   \xe2\x96\xb8 Rendering:   server-side          \xe2\x94\x82\n   \xe2\x94\x82   \xe2\x96\xb8 Target:      server               \xe2\x94\x82\n   \xe2\x94\x82                                       \xe2\x94\x82\n   \xe2\x94\x82   Listening: http://localhost:3000/   \xe2\x94\x82\n   \xe2\x94\x82                                       \xe2\x94\x82\n   \xe2\x95\xb0\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xaf\n\ni Preparing project for development                                           17:35:26\ni Initial build may take a while                                              17:35:26\ni Discovered Components: .nuxt/components/readme.md                           17:35:26\n\xe2\x88\x9a Builder initialized                                                         17:35:26\n\xe2\x88\x9a Nuxt files generated                                                        17:35:26\n\n* Client \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 building (10%) 1/2 modules 1 active\n node_modules\\webpack-hot-middleware\\client.js\n\n* Server \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 building (10%) 1/1 modules 0 active\n\n\nnode:internal/crypto/hash:71\n  this[kHandle] = new _Hash(algorithm, xofLen);\n                  ^\n\nError: …