小编kis*_*ssu的帖子

我正在尝试让 https 在我的 Vite 本地主机环境中工作。Chrome 显示无效证书错误。

我已经像这样设置了 vite.config.js 文件：

import { defineConfig  } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs';

export default defineConfig({
  resolve: { alias: { '@': '/src' } },
  plugins: [vue()],
  https: {
    key: fs.readFileSync('RootCA-key.pem'),
    cert: fs.readFileSync('RootCA.pem')
  }
})

当我运行它时npm run dev -- --https，它按预期工作，我没有从 Vite 收到任何问题。但是，Chrome 显示无效证书。

我使用 openssl 创建证书文件，这给了我 .crt、.pem 和 .key 文件。它们都不是二进制的，因此我将 .key 文件重命名为 RootCA-key.pem。我尝试使用 RootCA.pem 文件作为证书，并将 RootCA.crt 文件重命名为 RootCA-cert.pem 并将其用作证书。

作为临时解决方法，我在 Chrome 中启用了不安全的本地主机 (chrome://flags/#allow-insecure-localhost)，这至少消除了警告。

我正在使用 Vue 3 和 Vite。在 Vite 构建生产后，我遇到了动态 img src 的问题。对于静态 img src 没有问题。

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>

它在两种情况下都运行良好：在开发模式下运行时以及在 vite 构建之后。但我有一些图像名称存储在动态加载的数据库中（菜单图标）。在这种情况下，我必须像这样编写路径：

<img :src="'/src/assets/images/' + menuItem.iconSource" />

（menuItem.iconSource 包含图像的名称，如“my-image.png”）。在这种情况下，它在开发模式下运行应用程序时有效，但在生产构建后无效。当 Vite 为生产构建应用程序时，路径会发生更改（所有资源都放入_assets文件夹中）。静态图片源是由Vite build处理的，路径也会相应改变，但合成图片源则不然。它只是/src/assets/images/作为一个常量，不会改变它（当应用程序抛出 404 not find for image /src/assets/images/my-image.png 时，我可以在网络监视器中看到它）。我试图找到解决方案，有人建议使用require()，但我不确定 vite 是否可以使用它。

我的 tailwind.config.js 中有一些自定义颜色：

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

我想在我的 CSS 文件中使用它们。有没有办法替换#0e70ed下面的primary-500？

.prose a.custom-link {
  color: #0e70ed;
}

为什么 vue-router 给我这个错误？需要明确的是，登录流程按预期工作，但我想 a) 摆脱 errro 和 b) 了解错误发生的原因。

错误：

Uncaught (in promise) Error: Redirected from "/login" to "/" via a navigation guard.

登录流程

1. 开始注销，但输入一个需要身份验证的 URL（即除了“/login”之外的任何内容）
2. 被重定向到“/login”（如预期的那样）。
3. 登录
4. 成功重定向到从步骤 #1 开始的 Url，除了上述错误。

登录操作：

doLogin({ commit }, loginData) {
  commit("loginStart");
  axiosClient
    .post("/jwt-auth/v1/token", {
      username: loginData.username,
      password: loginData.password,
    })
    .then((response) => {
      commit("loginStop", null);
      commit("setUserData", response.data);
      this.categories = airtableQuery.getTable("Categories");
      commit("setCategories", this.categories);
      this.locations = airtableQuery.getTable("Locations");
      commit("setLocations", this.locations);
      router.push("/"); // push to site root after authentication
    })
    .catch((error) => {
      console.log(error.response.data.message);
      commit("loginStop", error.response.data.message);
      commit("delUserData"); …

我全新安装了 2.14.6 版的 nuxt，我想消除运行 nuxt 命令时出现的错误：

 WARN  Though the "loose" option was set to "false" in your @babel/preset-env co
The "loose" option must be the same for @babel/plugin-proposal-class-properties,
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

我假设我需要覆盖我的 nuxt.config.js 文件中的 babel 配置，但我还没有找到任何有用的解决方案。

我的项目根目录中有 .env 文件，在我的 nuxt 配置中，我使用变量来配置 ReCaptcha，如下所示：

import dotenv from 'dotenv'
dotenv.config()

export default {
    modules: [
        ['@nuxtjs/recaptcha', {
          siteKey: process.env.RECAPTCHA_SITE_KEY,
          version: 3,
          size: 'compact'
        }],
    ]
}

在 .env 中像这样：

RECAPTCHA_SITE_KEY=6L....

但应用程序总是失败并出现控制台日志错误：

ReCaptcha 错误：未提供密钥

当我像这样直接硬编码 ReCaptcha 密钥时：siteKey: 6L....应用程序开始工作，所以我猜问题在于读取 nuxt.config 中的 .env props

你知道如何解决它吗？

编辑：我尝试通过@kissu推荐和我在这里找到的示例更新我的nuxt.config： https: //www.npmjs.com/package/@nuxtjs/recaptcha

所以有新的 nuxt.config 也不起作用：

export default {
    modules: [
       '@nuxtjs/recaptcha',
    ],
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
  }
}

我在新的 Nuxt3 应用程序之上设置 Pinia 并启动开发服务器，按顺序使用以下命令：

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

开发服务器运行没有任何问题。然后，我将这行代码放入“nuxt.config.ts”中；

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

而且，当我再次尝试连接到开发服务器时，它在终端中给出了以下错误消息：

 ERROR  Cannot start nuxt:  Cannot find module 'pinia/dist/pinia.mjs'                                                                     12:03:55
Require stack:
- C:\Users\user\Documents\github2\nuxt-app\index.js

我刚刚开始使用 Nuxt 3，在使用打字稿功能时遇到了一些问题。

我正在尝试构建一个通用的导航栏，它可以有多个带有不同链接的按钮。为此，我想创建一个可以作为数组传递给组件的接口。

就像是：

interface Button {
  icon: string,
  link: string
}

有没有办法让界面在整个项目中可见？我找不到很多有关 Nuxt 打字稿集成的信息。

我只是想在标签中添加一个script块head。

例子

<script>
    alert('hello, world!');
</script>

我花了几个小时来找出解决方案，解决像这样简单的问题。关于添加脚本有很多答案，但没有针对inline脚本的答案blockNuxt 3

我们怎样才能做到这一点Nuxt 3？

细分分析提供了一个包含秘密 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