Nuxt html样式注入
Nuxt是一个基于Vue.js的开发框架，它能帮助我们轻松构建服务端渲染的应用程序。Nuxt具有自动化的路由和页面渲染功能，同时也支持将Vue组件静态地预渲染为HTML文件。
HTML样式注入是指在Nuxt应用中为页面注入全局的CSS样式。为了实现这个目标，Nuxt提供了两种方式：使用全局CSS文件和使用CSS模块。
- 全局CSS文件：
- 在Nuxt应用的根目录下创建一个名为
assets的文件夹。 - 在
assets文件夹中创建一个名为main.css的全局CSS文件，并编写所需的样式。 - 在Nuxt应用的
nuxt.config.js文件中，添加css配置项，并指定全局CSS文件的路径： - 在Nuxt应用的
nuxt.config.js文件中，添加css配置项，并指定全局CSS文件的路径： - 重新启动Nuxt应用，全局CSS样式将会被注入到所有页面中。
- 在Nuxt应用的根目录下创建一个名为
- CSS模块：
- 在Nuxt应用的任意Vue组件中，可以使用
<style>标签并设置scoped属性，来定义该组件的CSS样式。 - 这样，该组件的CSS样式将被限定在该组件的作用域内，不会影响到其他组件。
- 如果希望在多个组件中共享CSS样式，可以使用Nuxt的CSS模块功能。
- 在Nuxt应用的
nuxt.config.js文件中，添加buildModules配置项，并指定使用@nuxtjs/style-resources模块： - 在Nuxt应用的
nuxt.config.js文件中，添加buildModules配置项，并指定使用@nuxtjs/style-resources模块： - 在以上配置中，我们使用了SCSS作为CSS预处理器，并指定了全局的SCSS文件路径。
- 在Vue组件中，可以直接使用SCSS中的变量和混合器，而不需要在每个组件中都引入。
- 重新启动Nuxt应用，CSS模块中的样式将会在组件之间共享。
- 在Nuxt应用的任意Vue组件中，可以使用
总结： Nuxt提供了多种方式来实现HTML样式注入。通过全局CSS文件，我们可以将通用的样式应用到整个应用程序。而使用CSS模块，则可以在组件之间共享样式，并将样式限定在各自的作用域内。具体选择哪种方式取决于项目的需求和开发团队的偏好。
对于腾讯云相关产品，可考虑使用腾讯云提供的云服务器（https://cloud.tencent.com/product/cvm）来部署Nuxt应用。
相关·内容
1回答
nuxt样式不会在生产模式中使用
、、、、
我花了大约四个月的时间才开始做这个项目。在开发版本中，这是完全可以的，但是当我构建项目并将其上传到服务器时，我的一些样式将不会被应用到。
有关更多信息，我在组件中都导入了样式。
<style>
</style>
和资产css文件。assets\css\style.css
我不知道这样做对不对？
这是我第一次在vs代码终端中输入npm run build时出现了这个错误。
第一次npm运行构建
**✖ Nuxt Fatal Error**
浏览 11提问于2022-01-17得票数 0
回答已采纳
1回答
我的Nuxt项目中有两个页面：
|-pages/
|---index.vue
|---login/
|-----index.vue
pages中的index.vue具有以下样式：
<style lang="scss">
html,
body,
#__nuxt,
#__layout,
main {
height: 100%;
}
</style>
如你所见，我需要我的容器获取所有的屏幕高度，所以我需要把这个样式放在所有Nuxt容器中，因此，我的样式不能被限定作用域。这里一切都很好，但是当我去/login时
浏览 2提问于2021-10-14得票数 1
我基本上想删除滚动条：
关于vuetify他们说要用
html { overflow-y: auto }
但在Nuxt上这不起作用吗？
如果有人知道我会很感激。
我的代码:layout/default.vue
<template>
<v-app dark>
<v-main>
<nuxt />
</v-main>
</v-app>
</template>
<script>
export default {
}
</script>
<style scop
浏览 1提问于2021-04-04得票数 0
2回答
我使用nuxt.js对预渲染的html页面使用通用模式，并使用Google reCaptcha的密钥。
在nuxt.js应用程序中，存储密钥的最佳位置是哪里？它们在env对象中做nuxt.config.js吗？
export default {
env: {
secret: process.env.SECRET
}
}
另外，当应用程序是用nuxt generate生成并且应用程序是客户端时，这是如何工作的？env文件停留在服务器上，从不向客户端公开，或者是否所有内容都被编译并打包以发送到客户端？
浏览 5提问于2020-07-03得票数 2
回答已采纳
2回答
我有一个具有多个布局的项目，我在nuxt.config.js文件中全局添加了CSS，如下所示：
css: [
'@/assets/plugins/fontawesome-free/css/all.min.css',
'@/assets/plugins/ionicons/css/ionicons.min.css',
'@/assets/plugins/feather/feather.css',
'@/assets/css/style.css',
'@/assets/css/cust
浏览 12提问于2020-10-06得票数 0
2回答
有没有一种方法可以只为特定的页面添加样式到html，而不使用不同的布局。(即使我尝试使用布局nuxt加载所有样式，但无论如何都不好)我只需要为我的索引页面添加overflow:hidden to html
浏览 62提问于2020-07-26得票数 0
回答已采纳
1回答
我正在使用皮尼亚与nuxt和打字记录来创建商店。
这是auth存储的代码(带有nuxt auth模块)-
import { defineStore } from 'pinia';
export const useAuthStore = defineStore('authStore', {
getters: {
isAuthenticated(state) {
return state.$nuxt.$auth.loggedIn
}
}
})
现在的问题是IDE给出了打字错误-
类型“{}和{}”上不存在属性“$nuxt”
浏览 12提问于2022-02-01得票数 0
我的插件，env.js：
export default async (_ctx, inject) => {
const resp = await fetch('/config.json')
const result = await resp.json()
inject('env', result)
// eslint-disable-next-line no-console
console.log('env injected', result)
return result
}
然后，一个想法是使用nuxt.con
浏览 6提问于2021-12-04得票数 0
我在nuxt 2项目的.js文件中有一个函数。
基本上，我需要使用来自nuxt.config的nuxt模块属性，比如在普通.js文件中的函数中使用这个this.nuxt.options.。
例如：
aNormalJsFile.js
if (this.nuxt.options.module.triggers.isActive) {
// do something
}
但现在我做不到，因为它不知道什么是努克斯特，当然。我得到了一个错误：
无法读取未定义的属性(读取“nuxt”)
浏览 6提问于2022-11-03得票数 1
回答已采纳
这是我的nuxt.config.js文件的一部分：
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
// load bootsttrap.css from CDN
//{ type: 'text/css', rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css
浏览 17提问于2017-12-25得票数 19
在我的函数中，我使用的是ref，它被绑定到链接，当我试图更改颜色(ref.style.color = 'red')时，我会看到一个错误。因为绑定到nuxt链接的ref是对象，而且它没有样式属性。我知道我可以使用标签<a></a>，但是有人有办法用nuxt-link来制作它吗？
更多信息:我有一个链接
<nuxt-link
ref="card"
@mousemove.native="move"
@mouseleave.native="leave"
@mouseover.n
浏览 4提问于2022-08-22得票数 1
回答已采纳
2回答
如何将几个加载组件添加到nuxt中，并将其称为如下所示：
客户用户的this.$nuxt.$loading.guestLoader.start()for私有用户this.$nuxt.$loading.privateLoader.start()
医生：.
有什么想法吗？
浏览 3提问于2021-05-17得票数 1
回答已采纳
在使用此命令安装Nuxt.js npx create-nuxt-app <myapp> everything之后一切正常，但是当我试图更改layout/default.vue上的样式代码时，我得到了以下错误：
241:9错误插入⏎更漂亮/更漂亮
我使用的是Visual代码，所以我从Preferences > settings > Extensions > Vetur中更改了设置，更改了Format > Default Formatter: CSS = none和Default Formatter: HTML = none。
尽管如此，问题依然存在。我
浏览 0提问于2019-04-02得票数 3
2回答
生成静态站点时不创建css文件夹："npx nuxi generate“
有什么不对的？
package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
浏览 12提问于2022-09-26得票数 0
Nuxt 3的第一个版本候选人将很快推出，因此我开始了一个新的项目与Nuxt 3。我已经面临一个常见的问题，我想问如何解决它。但我自己做到了，所以我提出了一个自我回答的问题，以帮助那些将来可能面临同样问题的人。
如何在vue组件中使用全局Sass (或Scss)变量？我在其他帖子中看到，我们可以使用@nuxtjs/style-resources包，但它似乎是一个Nuxt 2包。我认为在Nuxt 3中可能有更好的方法来实现它，而不需要添加依赖项(如style-resources )？
我所说的“全局变量”是一个SASS变量，我希望能够在我的Vue组件中使用SASS变量，而不必包含SASS文件。
浏览 115提问于2022-03-19得票数 4
我正在使用vue-test-utils将jest集成到我的nuxt应用程序中(遵循Edd Yerburgh的新书)。
测试开箱即可失败，并显示"SyntaxError: Unexpected {“。使用nuxt可以很好地构建类似的代码，而使用Ava可以运行测试。我假设我的jest配置有问题。
我已经包括了我的package.json，代码摘录和控制台输出。
谢谢你的帮助
丹
npm 6.4.0
package.json
{
"name": "cxl-ui-base",
"version": "1.0.0",
&
浏览 2提问于2018-08-24得票数 3
2回答
我正在尝试将element UI导入Nuxt.js，在他们的twitter账户上，他们链接到glitch ()，上面列出了重要的文件。在default.vue中，它列出了以下内容
<template>
<div>
<nuxt/>
</div>
</template>
<style src="element-ui/lib/theme-default/index.css"></style>
我通过运行以下命令将元素ui导入到nuxt项目中：
npm i element-ui --
浏览 26提问于2018-08-09得票数 1
这真的把我逼疯了。我不是在变异道具。我知道这是什么，也知道你为什么要犯这个错误，而我不会这么做。有人能帮帮我吗?因为我不能排除这个错误。
这是我的组成部分：
<template>
<h2>
{{ title }}
</h2>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component({})
export default class N
浏览 11提问于2022-05-02得票数 0
我正在构建一个Nuxt应用程序，并尝试创建一个路由守卫。如何在我的Nuxt中间件中访问$can？
export default (context) => {
const { route } = context
route.matched.some((routeRecord) => {
const options = routeRecord.components.default.options
console.log(options)
// should use $can here
return true
浏览 5提问于2021-03-30得票数 0
我想将OpenStreetMap集成到我的NUXT.js应用程序中。我正在尝试使用this module，但在所有说明之后我看到一个空页面。 我已经在github上创建了an issue，但仍然没有响应。 pages\index.vue <template>
<div id="map-wrap" style="height: 100%">
<no-ssr>
<l-map :zoom=13 :center="[47.413220, -1.219482]">
浏览 7提问于2019-01-18得票数 2
Nuxt提供了一种在组件中动态设置layout的方法，但是是否有一种方法可以从<template> (例如v-if="layout === 'me'" )中确定正在使用的布局？例如，我希望使用单一路由/c/dream，为经过身份验证的用户提供一个布局，为未经身份验证的用户提供另一个布局。如果我可以从模板中确定正在使用的布局，那么我就可以根据布局构造HTML。我已经检查了组件中的this对象，没有看到确定使用哪个布局的方法。
浏览 5提问于2021-10-07得票数 4
回答已采纳
1回答
如果v-btn (vuetify)组件具有"nuxt“属性(在nuxt.js框架中用作)，则它会以不同的方式显示。
如何修复它？
第一个图像是不带"nuxt“的v-btn组件(它应该正常显示)，第二个图像具有属性。
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
>
Accept and Enter
</v-btn>
<v-btn
class="
浏览 0提问于2020-03-07得票数 1
当试图使用自定义别名导入文件时，我会收到以下错误：
import api from 'api'
api in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/exercises.vue?vue&type=script&lang=js&
这是我的nuxt.config.js：
import { resolve } from 'path'
const _api = process.env.A
浏览 0提问于2022-05-15得票数 1
我正在使用Nuxt.js开发一个静态站点(我的目标是发布nuxt generate的结果)。
通过调用json来生成基于的内容。
我想抓取一些文件，并将它们包括在/static目录中，这取决于API响应。如何才能做到这一点？
为了更好地说明这个问题:假设有一个来自API的发票列表，所以在结果页面中我显示了发票信息，但我也希望包含到它的相应文件的下载链接(知道API响应之后可以解决这个问题)。
也许这个任务应该在nuxt.js之外完成，在站点生成之后？
浏览 7提问于2017-07-07得票数 10
回答已采纳
我的密码是这个。
但是，在此代码中，"/“在domain.com/?standalone=true时不会成为活动类。
<nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span>
</nuxt-link>
<nuxt-link to="/post" class="navBotton" active-class="active" >
浏览 1提问于2019-08-02得票数 8
在我和nux3的网络应用程序中，
我使用防火墙进行身份验证。所以我用了一个nuxt插件来插入一个firebase应用程序。
然后，我想使用全局nuxt中间件来检查用户是否是loggedIn。如果不重定向到其他页面，我的意思是增加导航护卫。
但是，我所能看到或理解的是，nuxt中间件在插件之前运行在firebase应用程序中。那么，处理这种情况的最佳方法是什么呢？
有什么方法可以在插件之后运行中间件吗？
还是有更好、更干净的方法来处理这个案子？
浏览 10提问于2022-08-04得票数 0
回答已采纳
1回答
我有一个由NUXT (VUE框架)创建的网站，在编译它时，它不会压缩CSS文件，给我一个非常长的HTML代码。
我用一个纱线生成文件，我想我必须在配置文件中放一些东西，这样它才能压缩CSS。
你能帮帮我吗?
谢谢
浏览 11提问于2022-02-17得票数 1
我似乎不能将动态修改的属性从布局传递到<Nuxt />组件。 这是我的~/layouts/default.vue <template>
<div>
<input v-model="myprop" />
<span>{{myprop}}</span>
<Nuxt />
</div>
</template>
<script>
export default {
provide: function () {
retur
浏览 31提问于2021-08-13得票数 0
回答已采纳
2回答
我有一个nuxt项目，在该项目中，我使用作为模块来对组件进行样式化。
我对默认样式不满意，我想添加一些定制，更准确地说，我想改变导航条的外观，并在切换按钮中添加一些动画。
如何访问和更改我的nuxt项目中的引导css文件？
有人有什么可供分享的例子吗？
浏览 0提问于2018-05-15得票数 2
回答已采纳
1回答
我有一个nuxt项目，我的项目scss结构是，我有一个main.scss，这是我的变量和字体导入等的全局scss文件。
我在作用域标记下编写组件内部的主scss。
我的全局样式和bootstrap似乎工作得很好，但当我尝试将scoped styles添加到组件中时，它们会被bootstrap覆盖。
例如，这是我的navbar.vue组件：
<style lang="scss" scoped>
nav {
padding: 3rem;
}
</style>
组件引导程序元素工作正常，但是我添加的padding被覆盖了。
这是我的nuxt.
浏览 1提问于2021-02-28得票数 0
1回答
我在Nuxt中有一个组件，模板中有以下HTML：
<div class="slider" id="slider" ref="slider" :style="'transform: transitionX(-' + sliderPosition + '%)'">
然后我还有一个数据变量：
export default {
data() {
return {
sliderPosition: 0
}
},
浏览 10提问于2021-07-21得票数 0
回答已采纳
1回答
使用Nuxt.js，在我的router.js中，我试图导入路由组件：
{
path: '/',
component: () => import(/* webpackChunkName: "index" */ '~/pages/index.vue')
}
我知道这个错误：
在组件中未定义的呈现函数或模板:匿名
我偶然发现了其他人的Nuxt.js项目，他们在最后添加了以下内容，这样就可以工作了：
{
path: '/',
component: () => import(/* webpackChunk
浏览 2提问于2021-03-02得票数 1
回答已采纳
1回答
我正在尝试将的材料设计集成到我的NuxtJS项目中，但是我没有找到任何关于如何将它添加到nuxt中的指示。
对于引导-vue，我将它添加到我的nuxt.config.js中，如下所示：
modules: [ 'bootstrap-vue/nuxt', ],
但它似乎不适用于mdbootstrap。
浏览 2提问于2018-03-02得票数 2
回答已采纳
2回答
下面是我的代码(它是Nuxt应用程序中的Vue组件)：
<template>
<div class="comment-editor" v-if="loggedIn">
<div class="leftside">
<!-- <client-only> -->
<textarea
ref="editor"
v-model="content"
placeholder=&#
浏览 1提问于2021-12-22得票数 1
回答已采纳
我想在我的前端项目中使用nuxtjs和tailwindcss。我已经通过如下模块集成了tailwindcss：
buildModules: [
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'@nuxtjs/tailwindcss'
],
tailwindcss现在工作，但代码完成不起作用。有两个Intellij插件确实为顺风添加了一个代码完成--但是当我开始自定义tailwind.config.js文件时，它们失败了，因为它们只建议基于默认的顺风配置的类(它们不识别我自己的类，并且
浏览 4提问于2020-03-03得票数 0
回答已采纳
我在Lambda上运行Nuxt，像这样启动它：
const { loadNuxt } = require('nuxt-start');
module.exports.render = async (event) => {
const nuxt = await loadNuxt({ for: 'start' });
const { html } = await nuxt.renderRoute(event.requestContext.http.path);
return {
statusCode: 200,
body: ht
浏览 16提问于2021-03-17得票数 2
我想在RubyMine中通过Reformat Code命令修复ESLint错误和警告。
有一个类似的，但答案是使用Fix ESLint problems命令。(我希望始终使用相同的快捷键设置代码格式)
为了添加样式规则，我在nuxt项目中打开.eslintrc.js并运行Apply ESLint Code Style Rules命令，但它没有改变行为。
如何通过Reformat Code命令解决ESLint问题？
这是我的.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: tru
浏览 2提问于2019-12-09得票数 1
1回答
我使用的是Nuxtv2.13和Vuetify v2，在我的默认布局中也使用了“保持活动”。随着我的应用程序越来越大，我注意到内存问题越来越多，所以我的应用程序至少需要在云服务器上建立和正常工作的大约4GB内存。我四处搜寻，发现零散的碎片，所以决定分享它们并讨论解决方案。
请根据他们的#号码回答每一个
#1 - NuxtLink (vue-NuxtLink)内存泄漏:其他人发现vue-路由器中可能存在泄漏；也因为与nuxt-链接相关的DOM将被预取，因此内存中的使用率也可能很高。因此，有人建议使用html锚，而不是像这样的nuxt链接：
<template>
<a href
浏览 6提问于2021-03-28得票数 22
1回答
给出了使用Ava的官方Nuxt端到端测试的示例：
import test from 'ava'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'
// We keep a reference to Nuxt so we can close
// the server at the end of the test
let nuxt = null
// Init Nuxt.js and start listening on localhost:4000
test
浏览 1提问于2018-10-10得票数 5
当前
我有两个存储库：
主Web应用程序-简单nuxt3 web应用程序组件库-简单vite/vue应用程序
目标
使用vite、vue3和tailwindcss构建自己的组件库
问题
当我使用npm run dev时，我可以让我的组件很好地工作(从vite应用程序)，但是当我构建我的库npm run build:watch并将它们导入到另一个项目(nuxt )中时，顺风类/样式不能工作。
这是应用程序(一切都很好)
这是我导入组件的nuxt应用程序(没有样式)
储存库：
Component 主网络应用程序：库：
浏览 2提问于2022-05-01得票数 4
回答已采纳
1回答
我有两个独立的项目，laravel和nuxt；我希望，当我从laravel上传文件时，它将存储在nuxt项目的静态文件夹中。有什么办法可以解决这个问题吗？
浏览 2提问于2021-12-02得票数 0
我想在我的nuxt项目中使用stencil库。
我能够让它工作，但当vue组件在服务器端呈现时，我只能让stencil的组件在客户端呈现。
我认为最大的问题是defineCustomElement需要window作为参数。
我知道stencil.js有一个"prerender“，在我看来基本上就是SSR，我想像使用Nuxt.js SSR一样使用它。
因此，我的问题是:如何配置nuxt项目以支持stencil.js的服务器端呈现
浏览 0提问于2019-01-23得票数 4
我已经设置了： render: {
csp: false
}, 在我的nuxt.config.js中，但是youtube视频仍然被CSP屏蔽？ 这是默认的浏览器吗？
浏览 10提问于2021-03-28得票数 0
回答已采纳
1回答
我正在使用Nuxt.js (MPA)处理一些静态页面。每当我运行generate命令时，所有的<nuxt-link> URL都是从根目录开始的，即/。例如，我的结构是：
pages
|
- index.vue
- policy.vue
在index.vue中，我将策略页面链接为：
<nuxt-link to="policy.html"> Policy </nuxt-link>
这将导致/policy.html而不是policy.html。
浏览 5提问于2018-12-03得票数 0
1回答
当我开始构建nuxt js项目时，我写道：
nuxt build or npm run build
执行的结果是包含index.html的dist文件夹
<html>
<head>
</head>
<body>
<div id="__nuxt">
<style>
</style>
<div class="sk-folding-cube">
<div class="sk-c
浏览 1提问于2020-08-31得票数 2
npm init nuxt-app新项目-nuxt
sh: 1:创建-nuxt-app:找不到npm错误！代码127 npm错误！路径/var/www/html npm错误！命令失败，npm错误！命令sh -c create-nuxt-app "new-project-nuxt“
浏览 25提问于2022-11-29得票数 -1
回答已采纳
我有一个小型Nuxt SSR网站，通过FCM推送通知。对于推送通知( push )，我使用。在(闪烁引擎)或FireFox (壁虎引擎)中，这是很好的工作方式。现在，一个朋友遇到了一个问题，就是网站没有显示任何内容。他正在使用苹果设备。苹果有WebKit的要求，所以Chrome也使用WebKit作为苹果的引擎。WebKit不支持Push，但有自己的解决方案，即APN (苹果推送通知)。
WebKit下的错误消息如下："FirebaseError: message :此浏览器不支持使用firebase所需的FirebaseError。(消息传递/不支持的浏览器)“
现在，我正在寻找一种方
浏览 2提问于2019-11-09得票数 2
回答已采纳
7回答
第一次尝试在Nuxt3上通过
我想知道如何手动使用Nuxt3启动器中的尾风。
(不是通过，因为它是针对Nuxt2的，而不是使用Nuxt3的。)
我创建了一个空白的Nuxt3项目
npx degit "nuxt/starter#v3" my-nuxt3-project
然后，我手动安装了尾风车。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
nuxt.config.ts
export default {
css: [
'~/assets/tailwind.c
浏览 12提问于2021-09-09得票数 3
回答已采纳
我有两个页面index和blog，我希望在呈现每个页面之前操作html的属性，比如将<html>设置为<html class="dark">，所以我实现了一个方法initDOM()，并在vue mounted钩子函数中调用它。当我使用<a></a>导航页面时，一切都很正常。其职能是：
initDOM() {
let htmlObj = document.getElementsByTagName("html");
htmlObj[0].setAttribute('class', 'da
浏览 2提问于2022-11-23得票数 1
回答已采纳
1回答
我有一个nuxt应用程序，我在nuxt.config.js中包含了scss文件，这样它就可以编译并在我的应用程序中可用。 export default {
...
css: [
{ src: '~assets/sass/app.scss', lang: 'scss' },
]
...
} 现在我正在尝试实现一个管理部分，它将使用不同的布局。 我使用了两个布局文件，default.vue和admin.vue。我的目标是为目前存在的应用程序使用'assets/sass/app.scss‘，并为我的管理部分创建一个'assets/
浏览 14提问于2020-01-12得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
