在vue-cli的生产构建中混合了CSS

Question

我有一个问题，由npm run build创建的生产构建与由npm run serve提供的开发构建不同。生产中生成的CSS与开发中生成的不同。

背景

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