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,因此规范项目中的样式代码才是解决之道。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容