小编kis*_*ssu的帖子

我使用 Vue CLI 创建了一个 Vue3 应用程序，以使用 Vuex 和路由器创建我的应用程序。该应用程序运行良好。

注意：我使用 Vue3 https://blog.logrocket.com/using-vuex-4-with-vue-3/在 Vuex 中遵循了这个有用的文档

需求现在我想更改我的 Vue3 应用程序以支持服务器端渲染（即 SSR）。

我观看了这个关于使用 Vue3 创建 SSR 应用程序的精彩视频：https : //www.youtube.com/watch? v = XJfaAkvLXyU ，我可以像视频中一样创建和运行一个简单的应用程序。但是，当我尝试将它应用到我的主要 Vue3 应用程序时，我被卡住了。

我目前的症结是如何在服务器代码上指定路由器和 vuex。

我的代码

客户端入口文件（src/main.js）有以下内容

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App).use(store).use(router).mount('#app');

服务器入口文件（src/main.server.js）目前有以下内容

import App from './App.vue';
export default App;

在快速服务器文件 (src/server.js) 中，它当前具有

const path = require('path');
const express = require('express');
const { createSSRApp } = …

使用 i18n 时，当语言/区域设置发生变化时，如何调用函数？
我应该使用 Vuex 还是vue-i18n有允许我这样做的方法？

在 Nuxt2 中，您可以使用模板 $refs访问<script>它们this.$refs

我想知道 Nuxt3 的等效项是什么。

我需要它来访问元素的内部文本。我不被允许使用querySelector或getElementById等等。

这就是我们编写代码的方式。我可以提供 html 元素ref="fooBar"，但我无法使用this.$refs.fooBar或 访问它this.$refs。

<script setup lang="ts">
import { ref, computed } from 'vue';

const foo = ref('bar');

function fooBar() {
  //Do stuff
}
</script>

<template>
  //Html here
</template>

我在 Google Cloud Run 上部署了一个简单的 Nuxt（版本 3）应用程序，并使用 Lighthouse 测试了性能。分数非常糟糕，但它提供的最有影响力的改进之一是启用文本压缩（gzip 或 brotli）。

我能够在 nuxt 配置中实现服务器输出.mjs.br文件：vite-plugin-compression

import viteCompression from "vite-plugin-compression";

export default defineNuxtConfig({
  vite: {
    plugins: [viteCompression({ algorithm: "brotliCompress" })],
  },
...

尽管.mjs.br生成了文件，但.mjs默认情况下仍在提供文件。

如何让 Nuxt 提供 brotli 压缩文件？或者这还不可能吗？

在 vue 2 中v-html需要渲染一个额外的包装标签。但我正在尝试类似以下的事情。

<select v-model="coutnry">
 // here the options to be rendered.
</select>


<script>
...
data()}{
 return{
  countryTags:`<option value="BD">Bangladesh</option>`
 }
}
</script>

因为，在这里我无法渲染任何额外的 html 标签，我累了<template v-html="countryTags">，但这不起作用。stackoverlflow 周围的另一个解决方案似乎有点令人困惑。正确的解决方案是什么？

即使在阅读了多篇解释静态渲染和 SSR 渲染之间差异的文章之后，我仍然不明白动态 API 调用在这些不同模式下是如何工作的。

我知道 Nuxt 有fetch和asyncData钩子，它们在静态生成期间仅调用一次，但是如果我在组件方法内使用动态 HTTP 请求（例如，通过 POST 请求提交表单时）会怎样？这在静态网站中也有效吗？

我正在创建一个在大多数页面上显示用户生成的内容的网站，因此每次访问其中一个页面时我都必须发出 GET 请求以保持内容最新。我可以使用静态站点来做到这一点还是必须使用 SSR/其他东西？我不想使用客户端渲染（SPA 模式），因为它很慢并且不利于 SEO。那么我最好的选择是什么？

我正在尝试从目录导入全局 Sass 样式表/assets，并使用在整个组件中定义的变量和混合等内容。我nuxt.config.ts目前的样子是这样的：

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    styleResources: {
        sass: ["@/assets/styles/main.sass"],
    },
    build: {
        extractCSS: true,
        styleResources: {
            sass: "@/assets/styles/main.sass",
            hoistUseStatements: true,
        },
    },
    // buildModules: ["@nuxtjs/style-resources"], // This throws error
    vite: {
        css: {
            loaderOptions: {
                sass: {
                    additionalData: ` @import "@/assets/styles/main.sass"; `,
                },
            },
        },
    },
});

当我现在尝试使用变量时，出现[plugin:vite:css] Undefined variable.错误。这曾经在 Nuxt 2 中工作得很好@nuxtjs/style-resources，但我不确定如何在 Nuxt 3 中工作。

但是，该样式表中的类和应用样式正在工作，只有变量、混合和映射不可访问。

有人可以帮忙吗？

设置：我使用 Nuxt3 + Pinia + VueUse。

目标： 我想通过 VueUse: 将 pinia 商店的状态保存到本地存储useStorage。

问题： 由于某种原因，本地存储中没有创建任何项目。我觉得我在这里错过了一些东西。在组件中我可以useStorage很好地使用。

在商店/piniaStoreVueUse.js

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: useStorage('my-state', 'empty'),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

在组件/SampleComponentStatePiniaVueUse.vue

<script lang="ts" setup>
    import { usePiniaStoreVueUse } from '~/stores/piniaStoreVueUse'; …

我想将图像 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