标签: vuejs3

我的后端（API 端点）正在 https://localhost:44308/api 上运行。在这种情况下，Nuxt3.js 会给出以下错误：

request to https://localhost:44308/api/menus failed, reason: self signed certificate ()
at async $fetchRaw2 (/C:/D/MyApp/Source/WebUser/app/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
at async Proxy.fetchData (/C:/D/MyApp/Source/WebUser/app/.nuxt/dist/server/server.mjs:52133:22)
at async setup (/C:/D/MyApp/Source/WebUser/app/.nuxt/dist/server/server.mjs:68832:5)

我的代码：

async fetchData() {
      const config = useRuntimeConfig();
      const result = await $fetch(`${config.apiBase}/menus`, {
        headers: {
          "Content-Type": "application/json",
          "Accept-Language": "en",
          // Authorization: `Bearer ${useRuntimeConfig().apiSecret}`,
        },
      });
      console.log(result);
      return result;
    }

解决这个问题的办法是什么？我看到建议运行 Nuxt3.js 的线程。请有人帮助我。非常感谢

我有这个简单的单元测试：

import { describe, it, expect } from 'vitest';\nimport { mount } from '@vue/test-utils';\nimport Login from './Login.vue';\n\ndescribe('Login.spec.js', () => {\n    it('mounts correctly', () => {\n        const wrapper = mount(Login, {});\n        expect(wrapper.isVisible()).toBe(true);\n    });\n});\n

但我的 Login.vue 组件有：

<script setup>\nimport { useHead } from '@vueuse/head';\n\n...\n\nuseHead({\n    title: 'Login',\n});\n</script>\n

单元测试抛出错误：

[Vue warn]: injection "usehead" not found. \n  at <Login ref="VTU_COMPONENT" > \n  at <VTUROOT>\n[Vue warn]: Unhandled error during execution of setup function \n  at <Login ref="VTU_COMPONENT" > \n  at <VTUROOT>\n …

我对 Vue3 或客户端开发总体来说有点陌生，我的任务是从 i18n 读取或更改全局区域设置。但根据文档，我应该能够在我的组件中使用 $i18n 变量，但它告诉我它是未定义的。

这是我的 i18n 配置：

    从“vue-i18n”导入{createI18n}；
    从“./locales/en.json”导入 en；
    从“./locales/nl.json”导入 nl；
    
    常量 i18n = createI18n({
      区域设置：“nl”，
      允许成分：真，
      warnHtmlInMessage: "关闭",
      后备区域设置：“nl”，
      消息：{
        恩，
        荷兰，
      },
    });
    导出默认i18n；

我的 main.ts 正在使用它

    从“vue”导入{createApp}；
    从“axios”导入 axios；
    从“@/App.vue”导入应用程序；
    从“@/router”导入路由器；
    从“@/plugin/appSettings”导入 appSettings, { type iAppSettings };
    从“@/plugin/api”导入 api；
    从“@/i18n”导入 i18n；
    从“@/stores”导入pinia；
    
    const startUp = async () => {
      尝试 {
        让设置=空；
        const 结果 = 等待 axios.get("config/config.json");
        设置=结果.数据；
        console.debug("加载的配置：", 设置);
    
        const app = createApp(应用程序);
        应用程序使用（pinia）；
        应用程序。使用（路由器）；
        app.use(appSettings, 设置);
        app.use(api, 设置?.apiUrl);
        应用程序.use(i18n);
    
        app.mount("#app");
    
        // …

我尝试根据 props 值计算一个值，如下所示：

interface Props {
  task: Task;
}

const totalPrice = computed(() => {
  return task.paymentDetail.products
    .map(p => p.amount)
    .reduce((partialSum, acc) => partialSum + acc, 0);
})

然后在我的模板中，我显示计算值，totalPrice如下所示：{{ totalPrice }}。

我的计算从来不是计算，如果我在里面添加一个console.log，我永远不会输入它。

如何根据 props 计算值？

我有一个products/index页面，products/[slug]在主产品页面中，我有一个NuxtLink更改页面并转到products/[slug]并获取该产品的数据。

第一次单击时，我有正确的数据，但是当我单击后退或单击产品/索引页面然后尝试单击另一个产品时，我有我单击的第一个产品的信息，并且在每个产品上，我再次有我点击的第一个产品的信息。

使用console.log引导我发现我的获取数据没有改变，我在这里错过了什么吗？

使用:keyand :page-keyon<nuxtPage/>不起作用。

我点击的第一个产品

第二个产品仍然没有变化，数据来自第一个产品

第三张图还是没有变化

productComponent.vue

<template>\n  <div class="mx-auto rounded border mb-7 border-blue-200 pt-1 px-2 mx-1 mb-2">\n    <NuxtLink :to="link">\n      <img\n        class="rounded mx-auto mb-3 border-b border-y-blue-300 pb-3"\n        :src="img"\n        :alt="alt"\n      />\n      <div class="mt-2">\n        <div>\n          <div class="items-center font-bold text-slate-700 leading-snug">\n            <p class="pr-3">{{ title }}</p>\n          </div>\n          <div class="mt-2 text-lg text-slate-600 pr-3 pb-2">\n            \xd9\x82\xdb\x8c\xd9\x85\xd8\xaa …

问题是在开发模式下，服务器速度非常慢。

我启动服务器，然后在浏览器中启动页面，等待 3\xe2\x80\x936 分钟加载页面！\n最初，ViteJs 下载了几千字节的资源，然后请求处于“待处理”状态2\xe2\x80\x933 分钟。

然后，每次都会开始加载所有资源。尽管我还在配置中指定所有 CSS 都应该是本地的。

页面重新加载也非常慢。

我这样开始项目：

vite\n

这是我的配置：

import {defineConfig} from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport {resolve} from 'path'\n\nexport default defineConfig({\n  plugins: [vue()],\n  resolve: {\n    alias: {\n      "@": resolve(__dirname, "./src"),\n    },\n  },\n  publicDir: 'public',\n  server: {\n    port: 8080,\n    watch: {\n      usePolling: true,\n      ignored: ['!**/bundle/**', '!**/lib/**']\n    }\n  },\n  css: {\n    modules: {\n      scopeBehaviour: "local"\n    }\n  },\n  preview: {\n    port: 8080,\n  }\n})\n

在我的项目中，我使用 Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3
我使用npm run dev.
我的路线定义：

routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue'),
    },
    {
      path: '/user-details/:login',
      name: 'userDetails',
      component: () => import('@/views/User.vue'),
    },
    {
      path: '/:pathMatch(.*)*',
      component: NotFound,
    }
  ],

当我以编程方式导航时，router.push({name: 'userDetails', params: {login: 'john.smith'}})页面userDetails/组件正确显示。
但是如果我浏览器重新加载开发服务器返回 404 并且NotFound组件不会显示。

铬合金：

FF：

工作示例：这里
我已将问题隔离给 Vite。使用 Vue CLI 一切正常。
我的vite.config.js：

import loadVersion from 'vite-plugin-package-version';

import { …

使用 Vue 3 组合 API，如何返回属性的计算值firstDigit？this计算属性中的关键字是，undefined但是当我省略时this，我会收到错误fourDigits is not defined。

<script setup>
import { computed, reactive } from 'vue'

const input = reactive({
    fourDigits: Array(1,2,3,4),
    firstDigit: computed(() => {
      return this.fourDigits[0] <===== `this` is undefined but if I leave `this` out, then `fourDigits` is undefined.
    })
</script>

<template>
   <div>
     <pre>
       {{JSON.stringify(input.firstDigit, null, 2)}}
     </pre>
   </div>
</template>

我有一个数据表，当我在网站上呈现这些记录时，我会将 ids 添加到元素中，每个元素都是不同的 id(id="item-first")，那么该怎么办？

 <div class="" v-for="(item, index) in producthots" :key="index">
          <div
            :class="
              index % 2 == 0 ? 'product-item row-reverse' : 'product-item'
            "
          >

我希望渲染时每个元素都有一个 id 对象

我已经成功地将vue-i18n库很好地集成到我的开发环境中，并且它运行得很好。

但是，当我在 Heroku 上部署项目时，使用 vue-i18n复数或链接区域设置消息的每条消息都不会被解释，并显示整个区域设置消息字符串：

我已经就回购协议展开了讨论，但到目前为止还没有回复......

我在Nuxt3插件中使用 vue-i18n (9.2.2)，因此使用VueJS 3 ，并使用Vite和 vue-i18n vite-plugin-vue-i18n插件进行构建。

Nuxt3配置（nuxt.config.ts），显示Vite插件配置来解析语言环境JSON文件：

import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineNuxtConfig({
  ...
  vite: {
    plugins: [
      VueI18nVitePlugin({
        include: [
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json')
        ]
      })
    ]
  },
 ...
});

vue-i18n 的 Nuxt 插件 (plugins/vue-i18n.ts) ：

import { createI18n } from 'vue-i18n' …