我如何在 Nuxt 中添加客户端 js 库>
How do i add client side js libraries in Nuxt>
第一次上nuxt。我正在尝试添加客户端库。
在正常的 html 中,我会将其添加到我的 index.html 文件中。但是我不知道如何在 nuxt 上做同样的事情。
如何添加?
这是我的配置
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'digglu',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'social media site' },
{ name: 'google-signin-client_id', content:'xxx.apps.googleusercontent.com' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLINT on save
*/
extend (config, ctx) {
if (ctx.dev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
根据 NuxtJS 文档:https://nuxtjs.org/guide/plugins
我可以确认这是有效的,但是有些插件在页面的前 3 次刷新时仍然抛出错误,然后错误消失了,我不知道原因。
Client-side only
Some plugins might work only for the browser, you can use the ssr:
false option in plugins to run the file only on the client-side.
Example:
nuxt.config.js:
module.exports = {
plugins: [
{ src: '~/plugins/vue-notifications', ssr: false }
]
}
plugins/vue-notifications.js:
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)
In case you need to require some libraries only for the server, you
can use the process.server variable set to true when webpack is
creating the server.bundle.js file.
根据 Nuxt 文档,您可以在 nuxt.config.js
.
中使用命名约定或对象语法
命名规则
export default {
plugins: [
'~/plugins/foo.client.js', // only in client side
'~/plugins/bar.server.js', // only in server side
'~/plugins/baz.js' // both client & server
]
}
对象语法
export default {
plugins: [
{ src: '~/plugins/both-sides.js' },
{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]
}
看这里:https://nuxtjs.org/guides/directory-structure/plugins#client-or-server-side-only
第一次上nuxt。我正在尝试添加客户端库。
在正常的 html 中,我会将其添加到我的 index.html 文件中。但是我不知道如何在 nuxt 上做同样的事情。
如何添加?
这是我的配置
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'digglu',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'social media site' },
{ name: 'google-signin-client_id', content:'xxx.apps.googleusercontent.com' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLINT on save
*/
extend (config, ctx) {
if (ctx.dev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
根据 NuxtJS 文档:https://nuxtjs.org/guide/plugins
我可以确认这是有效的,但是有些插件在页面的前 3 次刷新时仍然抛出错误,然后错误消失了,我不知道原因。
Client-side only
Some plugins might work only for the browser, you can use the ssr: false option in plugins to run the file only on the client-side.
Example:
nuxt.config.js:
module.exports = { plugins: [ { src: '~/plugins/vue-notifications', ssr: false } ] }
plugins/vue-notifications.js:
import Vue from 'vue' import VueNotifications from 'vue-notifications' Vue.use(VueNotifications)
In case you need to require some libraries only for the server, you can use the process.server variable set to true when webpack is creating the server.bundle.js file.
根据 Nuxt 文档,您可以在 nuxt.config.js
.
命名规则
export default {
plugins: [
'~/plugins/foo.client.js', // only in client side
'~/plugins/bar.server.js', // only in server side
'~/plugins/baz.js' // both client & server
]
}
对象语法
export default {
plugins: [
{ src: '~/plugins/both-sides.js' },
{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]
}
看这里:https://nuxtjs.org/guides/directory-structure/plugins#client-or-server-side-only