vue-cli 生产版本中的混合 CSS

Question

我遇到的问题是，由 . 创建的生产版本npm run build与 . 提供的开发版本不同npm run serve。生产中生成的 CSS 与开发中生成的 CSS 不同。

背景

由于标准的变化，使用 Vuetify 框架开发的现有应用程序的某些部分需要迁移到 Quasar。Vuetify 首先使用安装vue-cli。类星体是后来使用添加的npm。应用程序处于多页面模式。

问题

通过查看页面时npm run serve，已迁移到Quasar的页面会正确显示。但是，当尝试通过 将其部署到生产中时npm run build，相同的页面会中断。页面中的所有间距和边距均已关闭。检查生成的 CSS 后，发现某些 CSS 类被覆盖为 Vuetify 的值。

我尝试将每个页面的块分开，但无济于事。

以下是我的片段vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : '/',
  outputDir: '../flask/web/static/dist',

  transpileDependencies: ['quasar', 'vuetify'],

  pages: {
    dashboard: { // vuetify page, no problem.
      entry: 'src/pages/dashboard/index.js',
      template: 'public/index.html',
      filename: 'dashboard.html',
      title: 'Dashboard',
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-dashboard-vendors', 'dashboard']
    },
    page2: { // quasar page, the one with problem
      entry: 'src/pages/page2/index.js',
      template: 'public/quasar.html',
      filename: 'page2.html',
      title: 'Page2',
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-page2-vendors', 'page2']
    },
    page3: {
      entry: 'src/pages/page3/index.js',
      template: 'public/index.html',
      filename: 'page3.html',
      title: 'Page3',
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-page3-vendors', 'page3']
    },
    // other page definitions...
  },

  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  chainWebpack: config => {
    const options = module.exports
    const pages = options.pages
    const pageKeys = Object.keys(pages)

    // Long-term caching

    const IS_VENDOR = /[\\/]node_modules[\\/]/
    config.optimization
      .splitChunks({
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            priority: -10,
            chunks: 'initial',
            minChunks: 2,
            test: IS_VENDOR,
            enforce: true
          },
          ...pageKeys.map(key => ({
            name: `chunk-${key}-vendors`,
            priority: -11,
            chunks: chunk => chunk.name === key,
            test: IS_VENDOR,
            enforce: true
          })),
          common: {
            name: 'chunk-common',
            priority: -20,
            chunks: 'initial',
            minChunks: 2,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
  }
}

以下是每个页面的条目文件的片段。

src/pages/page2/index.js

import Vue from 'vue'
import Page2 from './Page2.vue'
import '@/plugins/quasar'

Vue.config.productionTip = false

new Vue({
  render: h => h(Page2)
}).$mount('#app')

src/plugins/quasar.js

import Vue from 'vue'

import '@/styles/quasar.scss'
import iconSet from 'quasar/icon-set/mdi-v5.js'
import '@quasar/extras/mdi-v5/mdi-v5.css'
import { Quasar, Notify } from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: {},
  directives: {},
  plugins: {
    Notify
  },
  iconSet: iconSet
})

src/page3/index.js

import Vue from 'vue'
import Page3 from './Page3.vue'
import vuetify from '@/plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(Page3)
}).$mount('#app')

src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
})

知道如何在生产和开发构建中在不同页面之间正确拆分代码，以便 CSS 不会相互覆盖吗？

Answer 1

解决我的问题的是添加：

css:{
  extract:false  
}

到根目录下的 vue.config.js 文件