Question

我遇到一个问题，其中npm run build创建的生产版本与npm run serve提供的开发版本不同。生产中生成的CSS与开发中生成的CSS有所不同。

背景

由于标准的更改，使用Vuetify框架开发的现有应用程序的某些部分需要迁移到Quasar。首先使用vue-cli安装了Vuetify。后来使用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文件

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

1 个答案: