Смешанный CSS на производственной сборке vue -кли - PullRequest
Новая
       13

Смешанный CSS на производственной сборке vue -кли

0 голосов
/ 27 апреля 2020

У меня есть проблема, из-за которой производственная сборка, созданная с помощью 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 не перекрывал друг друга?

...