我创建一个使用 Nuxt.js 和服务器端渲染的 Web 应用程序。
我不想暴露我的后端数据，所以我尝试使用 asyncData 和 Axios 向我的后端服务器请求。
但是 Nuxt.js 通过window.__NUXT__.data变量将我的后端数据暴露给客户端。
我尝试使用render:route钩子删除它，但它说
[Vue warn]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。这可能是由不正确的 HTML 标记引起的，例如在 p 内嵌套块级元素，或缺少 . 清除水合作用并执行完整的客户端渲染。
所以我尝试删除导致不匹配错误的脚本，但它使我的站点停止工作脚本。
那么问题来了：如何禁用客户端水合（客户端虚拟 DOM 树渲染）？或如何停止暴露原始数据？
我将 asyncData 与此代码一起使用：
asyncData ({ params, error }: { params: { id: string }, error: Function }) {
return axios.post('(backend)', data).then(res => res.data ? ({ data: res.data }) : error({ statusCode: 400, message: 'Bad request' }));
}
我使用 Nuxt.js 作为前端框架，使用 Laravel 作为 API 服务器，并使用 Cypress 编写一些 e2e 测试。我尝试使用cy.intercept减少 asyncData api 调用，但未能成功拦截 api 调用，我的测试规范如下所示：
const siteUrl = Cypress.env('site_url')
const apiUrl = Cypress.env('api_url')
describe('Post Test', () => {
beforeEach(() => {
cy.intercept('GET', `${apiUrl}/post`, {
fixture: 'post.json',
})
})
it('should render posts same as mock data', () => {
cy.visit(`/post`)
cy.contains('some posts from mock data')
})
})
我的 posts/index.vue 看起来像这样：
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.description }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params, $http …我想style-resources在新的 Nuxt 3 项目中全局配置和使用一些变量，但是当我将一些选项传递给 nuxt.config 文件时，我收到此错误：
Cannot start nuxt: resolver.resolveModule is not a function
我的依赖项：
"devDependencies": {
"nuxt3": "latest",
"prettier": "^2.4.1"
},
"dependencies": {
"@nuxtjs/style-resources": "^1.2.1",
"sass": "^1.43.4"
}
nuxt.config.js
export default defineNuxtConfig({
css: ['~/assets/main.scss'],
buildModules: ['@nuxtjs/style-resources'],
styleResources: {
scss: ['./assets/variables.scss'],
},
});
我正在使用这个库： https ://github.com/nuxt-community/style-resources-module
我知道 Nuxt 3 仍处于 Beta 版本，但也许有人已经遇到了这个问题或者知道应用全局资源的不同方式
我正在尝试在我的 Nuxt 应用程序中使用此脚本，但不知道如何操作。在基本的 HTML 文件中，它工作得很好。这是代码：
<!DOCTYPE html>
<html>
<head>
<title>outdooractive platform - API Template</title>
<meta charset="utf-8">
<!-- load Outdooractive Javascript API -->
<script type="text/javascript"
src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&key=yourtest-outdoora-ctiveapi&lang=en"></script>
</head>
<body>
<!-- container used by FlexView API -->
<div class="oax-top-cont"></div>
<!-- and some lines of javascript inside a script tag -->
<script type="text/javascript">
var conf = {
frontendtype: "tour", // choose content type
zoom: 11, // set initial zoom level
center: [ 10.292, 47.546 ] // set initial map center
};
var fvp = …当我尝试使用 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: …yarn build没有.env文件.env到项目中yarn start。useRuntimeConfig().public.baseURL到控制台并获取undefined.为什么运行时不跟踪我的环境变量？
.env
NUXT_PUBLIC_BASE_URL=https://example.com/api/v1
nuxt.config.js
export default defineNuxtConfig({
runtimeConfig: {
public: {
baseUrl: ''
}
},
插件/app.js
NUXT_PUBLIC_BASE_URL=https://example.com/api/v1
我用来useFetch获取一个字符串数组string[]，并可以transform选择将其从数组转换为对象。
我尝试了下面的代码：
type ReceivedData = [string, string, string];
interface TransformedData {
prop1: string,
prop2: string,
prop3: string
}
const { data, error } = await useFetch<ReceivedData>(
`./jsonPath.json`,
{
transform: ([prop1, prop2, prop3]: ReceivedData): TransformedData => ({
prop1, prop2, prop3
})
}
);
我收到这个错误
Type '([prop1, prop2, prop3]: ReceivedData) => TransformedData' is not assignable to type '(res: ReceivedData) => ReceivedData'.
我很确定我在这里弄乱了一些东西，但是 Typescript 期望转换方法返回它接收到的相同数据类型。
我想访问上下文变量以使用该isMobile标志根据结果选择不同的端点。我可以从组件中传递它dispatch，但我知道应该有一种方法可以做到这一点。
export const actions = {
...
signUpGoogle({ commit }) {
fireauth.useDeviceLanguage()
if (context.isMobile) {
fireauth.signInWithPopup(GoogleProvider).then ...
} else {
fireauth.signInWithRedirect(GoogleProvider)
}
}
我在这里看到它可以在服务器初始化上获取，但我真的不想依赖它，因为缓存会把事情搞砸
https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action
谢谢您的帮助
我的两个组件突然出现这个 Stylelint 错误，我不知道为什么。
\nUnexpected empty source (no-empty-source)\n我创建了第三个组件，并将内容删除到没有剩余内容的程度，并且该组件仍然显示错误。\n那么问题可能是什么？\n我试图理解这一点文档页面，但我不\不太明白其中的内容，它没有解释什么是“来源”。
\n这是简化的组件（项目中未使用）：
\nUnexpected empty source (no-empty-source)\n我得到：
\ncomponents/common/NewComponent.vue\n 12:31 \xc3\x97 Unexpected empty source no-empty-source\n