小编kis*_*ssu的帖子

细分分析提供了一个包含秘密 API 密钥的代码片段。在我的Nuxt.js项目中，我创建了一个名为的插件segment.js，我在我的nuxt.config.js：

nuxt.config.js

plugins: [
  {
    src: "~/plugins/segment.js",
    mode: 'client'
  }
]

在我的plugins/segment.js文件中我有我的片段：

!function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
analytics.load(process.env.SEGMENT_API_SECRET);
analytics.page();
}}();

显然我不想让我的秘密 API 密钥暴露在那里，所以我把它存储在我的.env文件中：

.env

SEGMENT_API_SECRET=FR4....GSDF3S

问题：process.env.SEGMENT_API_SECRET因此该片段不起作用。如何从我的插件访问我的变量？plugins/segment.jsundefined.envSEGMENT_API_SECRETplugins/segment.js

我尝试使用以下命令创建新的 nuxt 应用程序

npx nuxi init my-app

成功创建了带有 Nuxt 3.0 stable 的新应用程序，但我得到了这个恼人的响应

Nuxi 3.0.0-rc.10                                                                                              15:04:22

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

让我困惑的是Nuxi 3.0.0-rc.10的版本和我相信它来自节点的错误。

节点 - 18.12.1

npm - 8.19.2

git-2.38.1

我有一个 Nuxt 应用程序，我想使用 CSS 预处理器。
我安装了sass-loaderFiber 依赖项，但安装后，应用程序控制台中出现一条消息，我在图像和代码中显示了该消息

这是代码错误：

 WARN  webpack@5.49.0 is installed but ^4.46.0 is expected                                                                                                                                                                     17:22:44


 WARN  sass-loader@12.1.0 is installed but ^10.1.1 is expected

     


Rule can only have one resource source (provided resource and test + include + exclude) in {                                                                                                                           17:22:46
  "use": [
    {
      "loader": "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/babel-loader/lib/index.js",
      "options": {
        "configFile": false,
        "babelrc": false,
        "cacheDirectory": true,
        "envName": "server",
        "presets": [
          [
            "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/@nuxt/babel-preset-app/src/index.js",
            {
              "corejs": {
                "version": 3
              }
            }
          ]
        ]
      },
      "ident": "clonedRuleSet-29[0].rules[0].use[0]"
    }
  ]
}

  "use": …

我为 Vue 安装了 Vite 构建工具，当我运行它时 ( npm run serve)，我收到一个错误，生成以下消息

“缺少脚本：“服务””。

经过一番研究后，我发现我的钥匙package.json不见了serve。

添加它（"serve": "vite preview"）并运行后，我在浏览器中收到以下错误

“不能获取 /”

我正在学习 Vue，它的生态系统，现在我阅读了 nuxt.js。

据我了解，这是帮助我们构建 Vue 应用程序的工具，但我们不也对 vite.js 做同样的事情吗？

他们之间有什么区别？

我们使用pinia来管理应用程序状态。正如标题中提到的，我正在寻找 pinia 的 NuxtServerInit 钩子类似物。

一些背景信息：用户登陆表单的第一页；Form 调用 (fe) state.getCountries() 来获取选择输入之一的项目列表；用户选择一个国家/地区并导航到第二页，该页面还必须有权访问国家/地区列表；可以，当用户从第一页转到第二页时；但是如果用户刷新第二页，国家列表是空的（很明显）；

我很喜欢自动取款机if (state.countries.length === 0) state.getCountries()

但我相信这不是一个好方法

第1页

<template>
   <app-select :items="send.countries" />
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'
import { useSend } from '~/store/send'

export default defineComponent({
    setup() {
       const send = useSend()

       send.getCountries()

       return { send }
    }
}
</script>

第2页

<template>
   <app-select :items="send.countries" />
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'
import { useSend } from '~/store/send'

export default defineComponent({
    setup() {
       const …

我需要为 Nuxt3 配置服务器端口。我尝试这样做：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig(
  vite: {
    server: {
      port: 5000,
    },
  },
})

但这不起作用。如何在Nuxt3中设置服务器端口？

Nuxt 3 第一个候选版本即将推出，所以我正在使用 Nuxt 3 开始一个全新的项目。我已经面临一个常见的问题，我正想问如何解决它。但我自己做到了，所以我提出了一个自我回答的问题，以帮助将来可能面临同样问题的人。

如何在我的 vue 组件中使用全局 Sass（或 Scss）变量？我在其他帖子中看到我们可以使用该@nuxtjs/style-resources包，但它看起来像是 Nuxt 2 包。我认为在 Nuxt 3 中可能有更好的方法来做到这一点，而无需添加style-resources像?这样的依赖项。

我所说的“全局变量”是 SASS 变量，是指我希望能够在任何 Vue 组件中使用 SASS 变量，而不必包含 SASS 文件。

我想要的是

（鉴于我已经安装了该sass软件包）

// @/assets/style/main.sass
$grey-bg: #CCC
$light-blue: #c6d8f5

<!-- app.vue -->
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<style lang="sass">
body
  background-color: $grey-bg
  color: $light-blue
</style>

我已经尝试过的

我尝试将我的 sass 文件包含在Nuxt 配置 CSS属性中，如下所示：

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
    css: ["@/assets/style/global.sass"]
}) …

我尝试让它发挥作用

<component v-if="!pending" :is="dynComponent" />

在 Nuxt 2 中这没有问题，但在 Nuxt 3（Vue 3？）中似乎并不那么容易。

该变量dynComponent填充有进程过程中组件的名称 (myComponent)。

与 Nuxt 2 一样，我使用import myComponent from "@/layouts/myComponent.vue". 错误可能就在那里。

resolveComponent我在文档中读到需要使用助手。我也按照描述尝试过...但没有成功。(动态组件）

我也没有收到任何错误消息。什么都没发生。
有人可以解释一下如何在 Nuxt 3 中使用动态组件吗？

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