css - 组件样式未在生产中应用-Vue

Question

我有一个应用了作用域样式的组件 IndexHero.vue

<template>
    <v-container fluid>
        <div id="tsparticles" class="particles"></div> 
        
        <v-container 
        fill-height 
        class='mt-n16 fullheight pa-0' 
        >
            <v-row justify="center">
                <v-col cols='12' align='center'>
                    <h1 class=" mt-n16 display-1 font-weight-black">
                    HEADING
                </h1>
            </v-col>
            </v-row>
            
        </v-container>

    </v-container>
</template>

<style scoped>
    .particles {
        height: 100px;
        width: 100px;
        border: 2px dashed #f00;
    }
</style>

这在我开发时工作正常 npm run dev 但是当我生成静态构建时 npm run generate 类名在元素上但是类就是不存在。

我看过其他像这样的帖子使用 ::v-deep particles 和 * >>> particles 但这对我来说并不成功。我也试过删除 scoped 但这也没有用。谁能指出我应用样式的方向？我也在使用 Nuxt v2.14.4

更新:它在 DOM 树中的显示方式。 canvas 元素由 JS 库 tsparticles 插入。

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

import {fireDb} from './plugins/firebase';


export default {
  mode: 'universal',
  target: 'static',
  components: true,
  render: {
    fallback: false
 },

  //If you're debugging firebase cloud messaging notifications, comment off lines 10 and 11
  //Those two lines exposes the Nuxt dev server on an IP so multiple devices can connect
  //And debug across platforms/screen sizes
  server: {     
    port: 8000, // default: 3000     
    host: '0.0.0.0', // default: localhost   
  }, 

  /*

  ** Headers of the page
  */
  head: {
  
    title: 'COVID-19 in Trinidad and Tobago',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT." },
      { hid: 'theme-color', name: 'theme-color', content: '#121212'},

      //Apple Related Tags
      { hid: 'apple-mobile-web-app-title', name: 'apple-mobile-web-app-title', content: 'CoronavirusInfoTT - Developer'},
      { hid: 'apple-mobile-web-app-status-bar-style', name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'},
 
      //Facebook Open Graph Tags
      { hid: 'og:url', property: 'og:url', content: 'https://developer.coronavirustt.info/'},
      { hid: 'og:title', property: 'og:title', content: 'CoronavirusInfoTT - Developer'},
      { hid: 'og:description', property: 'og:description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT."},
      { hid: 'og:site_name', property: 'og:site_name', content: 'developer.coronavirustt.info/'},
      { hid: 'og:image', property: 'og:image', content: 'https://developer.coronavirustt.info/tagimageversiontwo.png'},
      { hid: 'og:image:type', property: 'og:image:type', content: 'image/png'},
      { hid: 'og:image:height', property: 'og:image:height', content: '800'},
      { hid: 'og:image:width', property: 'og:image:width', content: '800'},
      { hid: 'og:image:alt', property: 'og:image:alt', content: 'A preview of the landing page'},
      { hid: 'og:type', property: 'og:type', content: 'website'},


      

      //Twitter tags
      { hid: 'twitter:card', name: 'twitter:type', content: 'summary_large_image'},
      { hid: 'twitter:url', name: 'twitter:url', content: 'https://developer.coronavirustt.info/'},
      { hid: 'twitter:title', name: 'twitter:title', content: 'CoronavirusInfoTT- Developer'},
      { hid: 'twitter:description', name: 'twitter:description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT."},
      { hid: 'twitter:image', name: 'twitter:image', content: 'https://developer.coronavirustt.info/tagimageversiontwo.png'},
      { hid: 'twitter:image:alt', name: 'twitter:image:alt', content: 'A preview of the landing page for the website'},
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      //{ rel: 'preload', as:'style', href: '../node_modules/@mdi/font/css/materialdesignicons.min.css' },
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  //loading: '@/components/WanderingCubes',
  /* 
  ** Global CSS
  */
  css: [
    'typeface-roboto/index.css',
    '@mdi/font/css/materialdesignicons.min.css',
    '@/assets/main.css',
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/firebase.js',
  
  ],

  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify',
    '@nuxt/components',
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/pwa',
    '@nuxtjs/sitemap',
  ],
  pwa: {
    icon:{
      sizes: [64, 120, 144, 152, 192, 384,512], 
    },
    manifest:{
      name: 'CoronavirusInfoTT',
      short_name: 'COVID-19TT',
      description: "Statistics and information about the COVID-19 virus in Trinidad and Tobago. See visualizations about the virus' activity regarding the number of cases, deaths and recoveries as well as reopening phases. It also acts as a hub for updates from the relevant authorities",
      lang: 'en',
      background_color: '#121212',
    }
  },

 
  
  sitemap: {
    hostname: 'https://coronavirustt.info',
    gzip: true,
    exclude: [
      '/adminlogin',
      '/admindashboard',
    ],
  },

  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    defaultAssets:false,
    //treeShake: true,
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
  ** Build configuration
  */


  build: {
   
    /*
    ** You can extend webpack config here
   extend (config, {isClient}) {
      
    if (isClient){
      config.optimization.splitChunks.maxSize = 200500;
    }
  } 
    */


  },

  generate:{
    //fallback: false,
    async routes(){
      
      const qs = await fireDb.collection('covid19tt/initiatives/initiatives').get();
      let d =  qs.docs.map(function(x){
            
            let title = x.data().title;
         
            if(title !== undefined){
              title = title.toLowerCase().replace("'",'').replace(/ /g,'-');
              let date = String( x.data().dateAdded);
              let data = x.data();
              data['dateAdded'] = date;
              data['pageURL']= `https://coronavirustt.info/initiative/${data.urlTitle}/`;
              return {
                route:  `/initiative/${x.data().urlTitle}/`,
                payload: data,
              };
            }else{
              return null;
            }
         
        });
      d = d.filter( f=>{
        if( f !== null) return f;}
      )
      return d;
    }
  },
}

更新:

Answer 1

我以前使用过 TsParticles，但有时会出现问题。

您可以在 github 上查看我的工作示例Vue.js/Nuxt.js 上的 TsParticles。

 <div id="tsparticles" class="particles"></div> 

根据我自己之前的挣扎，我建议你将你的 id 重命名为不同于 tsparticles 的名称，因为名称可能会在 javascript 上发生冲突(这发生在我身上)。