vue-cli2 测试环境打包后的项目样式与正式环境打包后的样式

该项目样式编写不规范，导致测试环境打包后的项目样式与正式环境打包后的样式不一致。查看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,

image.png
将其改为true后，测试环境打包后的样式与正式环境打包后的样式一致了，但是这个值只建议在生产环境设置为true，因为它是CSS 提取，如果在开发环境设置为true则不方便进行热更新，详见：https://vue-loader.vuejs.org/zh/guide/extract-css.html#webpack-4，因此规范项目中的样式代码才是解决之道。