该项目样式编写不规范,导致测试环境打包后的项目样式与正式环境打包后的样式不一致。查看vue-cli2配置,发现跟样式相关及环境相关的配置就一处,在build/vue-loader.conf.js
中的extract: isProduction
,
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV && process.env.NODE_ENV.match('production')
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction // 此处
}),
cssSourceMap: sourceMapEnabled,
将其改为true后,测试环境打包后的样式与正式环境打包后的样式一致了,但是这个值只建议在生产环境设置为true,因为它是CSS 提取,如果在开发环境设置为true则不方便进行热更新,详见:https://vue-loader.vuejs.org/zh/guide/extract-css.html#webpack-4,因此规范项目中的样式代码才是解决之道。