网站搜索

javascript - 在 Nuxt.js 中使用 Vue-Meta 的内联 Js

基本上,我使用的是 Nuxt 2.9.2,并且试图使用 innerHTML 方法内联 Google Optimize 脚本,但每当我运行 npm run generate 时,代码会转换某些内容,即使 __dangerouslyDisableSanitizers 已将 innerHTML 列入白名单。

这是我在 Nuxt 配置 head 对象中的脚本

script: [ { innerHTML: `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.repl

阅读更多 →

vue.js - NuxtJS 静态生成的 HTML 页面在调用 /index.html 时不加载 Javascript

我正在开发一个 nuxtjs 项目,该项目将生成用于静态使用。当然,它使用 Javascript,例如用于导航、一些表单等。

当我使用 npm run dev 打开页面时,一切正常。

在使用 npm run build && npm run generate 导出后,我将 /dist 中生成的内容部署到我的服务器(用户请求 CDN,在这种情况下是 Google Cloud Storage)。如果我不添加 index.html 后缀,我可以正常使用页面,没有任何问题。

示例:

访问 https://page.com/subpage/ 工作正常

但是

访问 https://page.com/subpage/index.html 并不是真的。

是的,它使用 CSS 和 DOM 渲染内容,但 Javascript 完全不起作用。在 Google Chrome 的开发者工具中,我可以看到在两种情况下 Javascript 似乎都已加载,但

阅读更多 →

javascript - 浏览器刷新后 Nuxt 认证用户重置

我正在构建一个具有用户登录和注册信息的应用。我使用 nuxt/auth 模块来处理认证。每当用户登录时,状态会顺利地变为 true。我唯一遇到的问题是,当我调用 set user 方法时,用户信息可以成功注册,但每当我刷新浏览器时,我会丢失用户数据,即使它最初已经成功设置。

我用于 Nuxt Auth 模块的 Nuxt.js 配置

auth: { strategies: { local: { token: { property: "token", global: true,

阅读更多 →

javascript - Nuxt.js:如何为单个路由更改覆盖 scrollBehaviour

我有一个 Nuxt 页面,在每次路由更改时都会滚动到顶部。我们在 nuxt.config.js 中定义了这一点。

scrollBehavior (to, from, savedPosition) { return ({ x: 0, y: 0 }) }

现在我只有一个单独的导航链接,它有点特殊:“联系”并不指向一个仅包含联系信息的新页面,而是应该跳转到每个页面底部写有联系信息的页脚。所以我添加了一个链接(不是 nuxtlink)来链接到页脚中的 #contact 锚点。

阅读更多 →

javascript - 在头部使用 Nuxt Js i18n 添加 RTL 条件

我想添加如下条件

if(app.i18n.locale == 'ar')

我在这个项目中使用阿拉伯语和英语。如果当前语言是阿拉伯语,head 中会添加 bootstrap-rtl.css,如果当前语言是英语,则调用 bootstrap.css。我尝试了不止一种方法,但都没有成功。

答案#1

在插件文件夹中添加一个文件,例如 direction-control.js

export default ({ app }, inject) =>

阅读更多 →

javascript - nuxt.js Vuex Vuejs 无法读取未定义的属性 'getters'

我刚接触 Vuejs 和 Nuxt.js。我创建了一个 Nuxt 项目,在运行项目时遇到错误:

请帮助我。

谢谢。

答案#1

嗨,不确定你是否已经解决了这个问题。如果没有,你只需重启你的开发服务器,让 Vue 能找到 store。

希望这有帮助

答案#2

只需关闭你的 IDE,然后重启它

阅读更多 →

typescript - 使用 Nuxt.js 和 Vuetify 时,类型上不存在属性 '$vuetify'

在我的 Nuxt.js 应用中,当访问 this.$vuetify 时,我在代码的某个特定部分遇到了这个错误。

ERROR ERROR in components/equipment/QuickInfoCard.vue:21:20 19:51:29 TS2339: Property '$vuetify' does not exist on type '{ width(): string; height(): "100%" | "9em"; }'. 19 | }, 20 | height() { > 21 | switch (this.$vuetify.breakpoint.name) {

阅读更多 →

typescript - 在 Nuxtjs 3 中读取 Markdown 内容

我正在使用 Nuxtjs 3、TypeScript 和组合式 API 开发我的新项目。我可以成功渲染项目中 Markdown 的内容,但在某些情况下我需要访问 Markdown 文件中的一些特定内容。这是我的 Markdown 示例:

--- header.id: introducing header.title: my title header.next: nextFileName header.prev: previousFileName --- ### service One some content here <br> ### service two some content

现在,我需要将服务一、服务二读取为数组,以及文件的下一条、上一条和其他内容。

有人知道我如何在代码中访问这些内容吗?

答案#1

也许你可以使用 Content v2,这是 Nuxt 中一个用于 Markdown 文件的惊人模块

阅读更多 →

vue.js - 如何在 Nuxt TypeScript 中创建自己的类型?

当我在 Nuxt 中使用 $_app 时,它说 $_app 在 this 上不存在。我想在 Nuxt 类型中将 $_app 包含为我自己的类型。我尝试了这个:

import Vue from "vue" interface AppMixin { user: any } declare module "vue/types/vue" { interface Vue { $_app: AppMixin } }

我不知道这是否正确

阅读更多 →

javascript - 在 Nuxt.js 和 typescript 中使用 JS bind 操作符 (::)

我正在使用支持 TypeScript 的 Nuxt.js。我正在尝试使用这个插件导入 vuelayers 库:

import Vue from "vue" import Map from "vuelayers/src/component/map" import "vuelayers/lib/style.css" Vue.use(Map)

它给了我这个错误:

ERROR in ./node_modules/vuelayers/src/component/map/view.vue?vue&type=script&lang=js& Syntax Error: Unexpected token, expected ";" (253:8) 251 | */ 252 | subscribeAll () { > 253 | this::subscribeToViewChanges() | ^ 254 | },

阅读更多 →