vue-ssr 相关问题


从 Angular 16 转换为 Angular 17 后缺少 SSR 支持

我已将我的项目从 Angular 16 升级到 Angular 17。但是,我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后,Angular 是否提供 SSR 支持...


世博会React Native SSR

我有一个基于 Expo 和 React-native-web 构建的项目,适用于 Android、IOS 和 Web。 我使用 Expo 路由器进行导航,使用 @shopify/restyle 进行样式设置。 我想为此实施 SEO 或 SSR ...


Angular 10 ssr 不适用于请求 API

在一个项目中,我安装了 SSR 的 Angular Universal,并使用 Firebase 托管和功能进行部署。 对于静态文本和图像资源,我在生产中获取了用于 SEO 的内容,但是对于...


如何解决 Firebase Cloud Function 未在 SSR 的“/workspace/.next”中找到 Next.js 生产版本?

我之前问过这个问题,并且仍在为这个问题苦苦挣扎;谁能帮我解决这个问题: SSR Next.js 应用程序的 Firebase Cloud Function 未在...中找到生产版本


在 HTTPS 中运行 Visual Studio 默认 Vue 项目

我使用默认的 Vue 项目模板在 Visual Studio 2019 中创建了一个标准的 Vue 应用程序。我使用的是 Windows 10。这将创建一个可以使用 Vue CLI 启动的简单项目。这...


NextRender() 之后角度信号未更新

使用 Angular SSR 时,如果我使用 afterNextRender,我必须手动触发更改检测。 这毕竟是一个有角度的 API。 有人有解决方案吗? afterNextRender(() =&...


防止 HTML <dialog> 用 Vue 关闭

我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码: 从“vue”导入{ref}; const 对话框模板Re...


Vite+Vue 页面不需要的 CSS 样式

在Vite-Vue应用程序中,我实现了index.html和vue组件/视图的样式,但浏览器将它们显示为被划掉。 AMany =我在组件/视图中添加的样式也是 cro...


如何在 blazor SSR .net 8 中上传文件?

您好,我创建了一个具有模型和增强属性的 EditForm,当通过 OnValidSubmit="Submit" 提交到服务器时,断点在 Visual Studio 中工作,但 ViewModel 的 IFormFile 字段是...


vue-router useRouter 在构建库组件时不起作用

我正在构建一个 Vue3 npm 组件库,希望我可以使用 vue-router 的 useRouter 访问当前路由器,并且它将由导入我的任何 vue 应用程序自动提供


Vue 2.0 + webpack 使用 npm 包中的组件

我正在尝试使用 webpack 和 Vue 2.0 设置一个项目,但在我的项目中使用 npm 包(如 vue-parallax)中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...


Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...


如何让Next.js对SEO友好,同时支持PWA离线模式?

我们有一个 Next.js 应用程序,支持用于 SEO 的 SSR。 这意味着当您访问任何页面时,只会下载该特定页面所需的基本代码,从而导致...


Next.js 在生产中禁用服务器功能的缓存

在 next.js 14 中,我有一个页面使用默认的服务器端渲染 (SSR) 来获取一些数据并将其传递到其客户端组件。 导出默认异步函数 Page() { 常量杂志=等待


Vue 3 - 如何使用 typescript 将组件包装在 Vue 中

我正在尝试包装 PrimeVue 组件(日历),稍微更改其样式,然后再次导出。 反应中类似以下内容: const WrappedCalendar: React.FC = (...


Vue 3 简单的包罗万象的后备路由在服务器上不起作用

我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时,它会打开页面,但是当我直接打开链接时,它会显示未找到错误。 { 不是芙...


Angular 17 - SSR 独立 - 具有异步的路由 FactoryProvider - NG04014

简介 您好,我正在尝试配置我的角度路由器并根据我们是否经过身份验证向其传递不同的路由。 这是我执行此操作的代码: 应用程序.routes.ts 导出常量


在计算警告中使用 vue-i18n.t()

升级我的项目后,每次尝试在计算变量中使用 VueI18n.t() 时,我都会收到此警告: [Vue warn]:在计算的 getter 内部调用 getCurrentInstance()。这是inco...


如何使用Websocket从FastAPI(后端)返回JSON到Vue(前端)?

我有一个应用程序,前端是用Vue实现的,后端使用FastAPI框架。通信是通过websocket实现的。 目前,前端允许用户


如何使 Vue 2 提供/注入 API 响应式?

我按如下方式设置代码,并且能够从 SomeComponent.vue 中的 setter 更新 App.vue 中的 checkout_info,但 SomeComponent.vue 中的 getter 不是响应式的。 // 应用程序.vue 导出默认值 {...


Vue.js:为什么 $el 返回文本节点

我有以下代码: 导出默认类自定义扩展 Vue { 安装(){ console.log(this.$el); ...


“拒绝应用 {link} 中的样式,因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中

我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中,Vuetify 工作正常,但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息: “拒绝应用...


渲染对象列表时“无法读取未定义的属性”

我试图在 Vue 3 中按名称渲染对象列表,但我不断收到“无法读取未定义的属性(读取“名称”)”错误。 我对 Vue 还是新手,我不知道......


Vue 3,组合 API:“排除”TypeScript 实用程序类型导致道具验证错误

我正在使用 Vue 3 以及 Composition API 和 TypeScript,一切都是最新的稳定版本。 假设我有以下类型: 导出接口人{ 名称:字符串; } 导出类型统计...


如何在vue-i18n中使用@等特殊字符?

我正在使用 vue-i18n 来本地化我的表单。我有一个电子邮件字段,其中有一个占位符,其中包含一个包含 @ 符号的示例电子邮件地址。 emailPlaceholder:'例如:[email protected]'


Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文(原因:CORS 缺少允许来源)

开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线 路线::post('/login', [LoginController::class, '提交']); 并使用


为什么我在 Vue 开发工具中看不到 Pinia?

我正在使用 Vue 3、Vuetify 3 和 Pinia 开发一个应用程序,所有这些我都在学习过程中。我正在尝试按照这个视频来学习 Pinia,大约 17:50,演示者说要安装...


Vue/Nuxt:如何让组件真正动态?

为了使用动态定义的单页面组件,我们使用组件标签,因此: ... 从 '@/


在门户上部署Vue应用程序后出错。Azure

我创建了我的 Vue-Vite 应用程序。然后我在 dev.azure - Web App 上创建了存储库。接下来我将其部署在portal.azure.com 上。修复了一些错误后,我仍然不知道如何修复此错误: 主要....


如何在 vue javascript 应用程序中显示服务器目录中的所有图像

我正在尝试将主机(服务器)上的一个目录(图表)中存在的所有图像显示到 vue 页面中,而不必手动将它们全部列出在数据中,因此必须重建...


有没有办法让我的 WordPress 网站指向 diste/templates 目录中的 index.html 而不是正常的 WordPress 行为?

我正在使用 Vue.js 开发一个无头 WordPress 网站,并且我有一个名为 vue-wordpress 的自定义主题。该主题是使用 Vue CLI 搭建的。这是目录结构 - 距离 资产 模板


Vue js & laravel 后端编辑发票

编辑: 我正在从发票项目中获取这些数组,其中产品与发票 ID 相匹配 [ { “ID”:27, “发票 ID”:14, “产品id”:1, ...


ESLint:解析错误:意外的标记:

大家好我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题: 这是我在 .vue 文件中的代码 const toto = (msg: string) => { </desc> <question vote="7"> <p>大家好,我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题:</p> <p><a href="https://i.stack.imgur.com/y5tG8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3k1dEc4LnBuZw==" alt=""/></a></p> <p>这是我在 .vue 文件中的代码</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; const toto = (msg: string) =&gt; { console.log(msg) } &lt;/script&gt; </code></pre> <p>这是我的 eslintrc.js</p> <pre><code>module.exports = { &#39;env&#39;: { &#39;browser&#39;: true, &#39;es2021&#39;: true }, &#39;extends&#39;: [ &#39;eslint:recommended&#39;, &#39;plugin:vue/vue3-essential&#39; ], &#39;parserOptions&#39;: { &#39;ecmaVersion&#39;: 13, &#39;sourceType&#39;: &#39;module&#39; }, &#39;plugins&#39;: [ &#39;vue&#39; ], &#39;rules&#39;: { &#39;vue/multi-word-component-names&#39;: &#39;off&#39;, &#39;vue/object-curly-spacing&#39;: [2, &#39;always&#39;], &#39;vue/html-closing-bracket-spacing&#39;: [2, { &#39;selfClosingTag&#39;: &#39;always&#39; }], &#39;vue/max-attributes-per-line&#39;: [2, { &#39;singleline&#39;: { &#39;max&#39;: 1 }, &#39;multiline&#39;: { &#39;max&#39;: 1 } }], &#39;semi&#39;: [2, &#39;never&#39;] } } </code></pre> </question> <answer tick="true" vote="10"> <p>您需要配置 eslint 以支持 typescript,因为 eslint 不支持开箱即用。 首先,您需要安装<a href="https://www.npmjs.com/package/@typescript-eslint/parser" rel="nofollow noreferrer">@typescript-eslint/parser</a>,然后安装<a href="https://www.npmjs.com/package/@typescript-eslint/eslint-plugin" rel="nofollow noreferrer">@typescript-eslint/eslint-plugin</a>。 安装完这些后,请按如下方式更新您的配置 - </p> <pre><code>module.exports = { &#39;env&#39;: { &#39;browser&#39;: true, &#39;es2021&#39;: true, node: true }, &#39;extends&#39;: [ &#39;eslint:recommended&#39;, &#39;plugin:vue/vue3-essential&#39; ], &#39;parserOptions&#39;: { &#39;ecmaVersion&#39;: 12, &#39;sourceType&#39;: &#39;module&#39;, parser: &#39;@typescript-eslint/parser&#39; }, &#39;plugins&#39;: [ &#39;vue&#39;, &#39;@typescript-eslint&#39; ], &#39;rules&#39;: { &#39;vue/multi-word-component-names&#39;: &#39;off&#39;, &#39;vue/object-curly-spacing&#39;: [2, &#39;always&#39;], &#39;vue/html-closing-bracket-spacing&#39;: [2, { &#39;selfClosingTag&#39;: &#39;always&#39; }], &#39;vue/max-attributes-per-line&#39;: [2, { &#39;singleline&#39;: { &#39;max&#39;: 1 }, &#39;multiline&#39;: { &#39;max&#39;: 1 } }], &#39;semi&#39;: [2, &#39;never&#39;] } } </code></pre> </answer> <answer tick="false" vote="1"> <p>就我而言,问题是我使用解析器选项作为数组,而不是字符串:</p> <pre><code> parserOptions: { - parser: [&#39;@typescript-eslint/parser&#39;], + parser: &#39;@typescript-eslint/parser&#39;, }, </code></pre> </answer> <answer tick="false" vote="0"> <p>如果你在项目中同时使用 JS 和 TS,此配置有帮助</p> <pre><code> overrides: [ { files: [&#39;*.vue&#39;], parser: &#39;svelte-eslint-parser&#39;, parserOptions: { parser: { // Specify a parser for each lang. ts: &#39;@typescript-eslint/parser&#39;, js: &#39;espree&#39;, typescript: &#39;@typescript-eslint/parser&#39; } } } ], </code></pre> </answer> <answer tick="false" vote="-1"> <p>我在节点 v12.22.9 上遇到了这个问题。通过升级到 v14.21.2,我不再遇到解析错误。您可以使用命令升级/安装</p> <pre><code>nvm install v14.21.2 </code></pre> </answer> </body></html>


如何在背景图片上设置Vue Css变量

`这是我的状态 const 图标 = ref('image.jpg') 背景图像:url(图标); 此方法不起作用,请告知如何进行 背景...


Vue.js 风格的 v-html 和范围内的 css

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式? 简单的例子: 组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式? 简单的例子: 组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见,v-html 内容没有 data-v 属性,但生成的 css 对于 svg 具有 data-v 属性。 我知道这是 vue-loader 的预期行为(https://github.com/vuejs/vue-loader/issues/359)。在本期中提到了后代选择器。但正如你所看到的,我在我的 css 中使用了它,但它不起作用。 如何设置 v-html 内容的样式? 我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用(没有效果),而/deep/方法导致构建错误...... 这是有效的: .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述: 新版本的vue-loader(从版本12.2.0开始)允许您使用“深层范围”CSS。你需要这样使用它: <style scoped>现在支持可以影响子级的“深度”选择器 使用 >>> 组合器的组件: .foo >>> .bar { color: red; } 将被编译为: .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面 将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用,但后来我尝试使用 ::v-deep 选择器 例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说,如果接受的答案不起作用,请尝试: .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况,您应该这样做: <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>


Vue 多选组件的标签无法读取嵌套属性

我有一个这样的数据结构: 代理(数组){ 0: { id: 1, machineries_ID: 2, 机械: { id: 2, en_name: '数字 MRI', pa_name: '本机', model_no: '2022', company_id: 1, ... } }, ...


如何在Vue中使用insertAdjacentHTML生成自定义标签/元素(组件)

使用 insertAdjacentHTML 我可以制作 div、span 等 .. html 元素,但无法制作自定义标签 基本上insertAdjacentHTML可以生成html eleme...


onMounted 当没有要关联的活动组件实例时调用

Symfony/VueJS 组件 // 导入 从“../hooks/getUser”导入 getUser; 从 'vue-router' 导入 { useRoute } // 增值服务 常量路由 = useRoute() 常量 { 用户 } = getUser(1) const 路线我...


Nuxt 3 项目无法找到 PWA 图标

开发工具错误 我目前正在尝试在我的 nuxt 3 项目中实现 PWA 功能,但我不断遇到这个问题:[Vue Router warn]: No match found for location with path "/icon_512x512...


React 作为 @vue/apollo-composable 的依赖项

我有一个使用 Composition API 的 VueJs 应用程序。我想使用 apollo 向我的 GraphQL 后端进行查询,但收到错误无法解析“react”。 我的依赖项是:“@...


ApexCharts 自定义标记颜色

我在我的 vue 项目中使用 apexCharts。 图表 我希望当线超过黄线时标记颜色变为黄色(警告)。当线条超过...时,标记颜色会变为红色


Tailwind 缺少很多款式

我使用 Laravel Breeze 以 Vue 为基础构建了一个新网站。现在发现 Tailwind 文档中定义的内容缺少很多类。 编辑:为了澄清这些是我尝试过的课程...


更新和访问Vue组件之间的警报消息变量

我正在使用 VueJS 和 Laravel 6.0。我想要实现的是创建全局变量alertStatus和alertMsg,以便每次进行AJAX调用时,全局变量都可以


Inertia.js 和 Laravel - 视图如何自动接收 auth::user() 对象?

我目前正在开发 Laravel 8 项目,第一次尝试将提供的 Laravel Breeze 脚手架与 Inertia.js 和 Vue 一起使用。在最初的仪表板脚手架中,仪表板...


Heroku 上的部署失败:Vue-CLI 构建错误

我在 Heroku 上部署 Node.js 应用程序(其中包括 Vue.js 前端)时遇到了持续存在的问题。尽管多次尝试和不同的配置,我的构建始终如一......


如何使用 Vue 将我的 props 定义为与打字稿中的“img”元素相同?

我想对一个组件进行类型推断,以传递 img 元素的所有 props。 我试过这个: 定义属性() // 和 定义属性() 两者都...


Vue 3-Nuxt 3 Composables 不控制台日志

我正在尝试使用可组合项进行 console.log,它曾经工作正常,但现在它不起作用。这就是我试图做的: 〜/可组合项/测试/index.ts 导出函数 useTester() { 控制台.log(...


v-on 的 .native 修饰符仅在组件上有效,但它用于 <a> 标签

我正在进行 Vue3 迁移,我不确定如何解决这个特定问题,它在 Vue2 上运行良好。 错误:[Vue warn]“v-on 的 .native 修饰符仅在 comp 上有效...


如何在 Vue 中扩展原生 HTML 元素的 prop 类型?

假设我有一个元素,它包装一个输入并获取其所有属性,此外还有其他一些属性。 在反应中,这将被键入为 接口 ExtendedInputProps 扩展了 React。


无效的 prop:VueJS 中的类型检查失败错误

我正在尝试使用名为 CardRenderer.vue 的组件,它使用对象数组渲染卡片。我一次又一次地使用相同的组件来渲染数据。我遇到了这个错误“[Vue w...


© www.soinside.com 2019 - 2024. All rights reserved.