vue-cli3 编译后标签之间的空格被移除

升级vue-cli3 打包后,编译的template 元素之间的空格被移除了
导致display: inline-block 元素之间默认的间隙没有了,导致元素都连在一起

vue-cli

Vue Cli 3 seems to be removing styles from assets #2475

https://github.com/vuejs/vue-cli/issues/2475

vue.conf.js 中加入配置

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
  }

修复前

修复后效果

vue.conf.js 完整配置如下

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    
    publicPath: './',

    // 将构建好的文件输出到哪里
    outputDir: 'dist',

    // 放置静态资源的地方 (js/css/img/font/...)
    assetsDir: 'static',//或assets

    // 是否在保存的时候使用 `eslint-loader` 进行检查。
    // 有效的值：`true` | `false` | `"error"`
    // 当设置为 `"error"` 时，检查出的错误会触发编译失败。
    lintOnSave: false,

    // 使用带有浏览器内编译器的完整构建版本
    // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
    // compiler: false,

    // babel-loader 默认会跳过 node_modules 依赖。
    // 通过这个选项可以显式转译一个依赖。
    transpileDependencies: [/* string or regex */],

    // 是否为生产环境构建生成 source map？
    productionSourceMap: false,

    // 调整内部的 webpack 配置。
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
    chainWebpack:  config =>  { 
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
        // 移除 preload 插件
        config.plugins.delete('preload')
        // 压缩代码
        config.optimization.minimize(true);
        // 分割代码
        config.optimization.splitChunks({
            chunks: 'all'
        })   
        config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.compilerOptions.preserveWhitespace = true
          return options
        })
        
        
    },

    // CSS 相关选项
    css: {
        // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
        // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
        extract: true,

        // 是否开启 CSS source map？
        sourceMap: false,

        // 为预处理器的 loader 传递自定义选项。比如传递给
        // sass-loader 时，使用 `{ sass: { ... } }`。
        loaderOptions: {},

        // 为所有的 CSS 及其预处理文件开启 CSS Modules。
        // 这个选项不会影响 `*.vue` 文件。
        modules: false
    },

    // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
    // 在多核机器下会默认开启。
    parallel: require('os').cpus().length > 1,

    // PWA 插件的选项。
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
    pwa: {},

    // 配置 webpack-dev-server 行为。
    devServer: {
        open: process.platform === 'darwin',
        host: '192.168.0.233',
        port: 8889,
        https: false,
        hotOnly: false,
        open:true,//启动打开浏览器
        // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
        //proxy: 'http://localhost:3001', // string | Object
        proxy: {
            '/api':{
                //target:'http://192.168.0.72:8181/', //本地地址            
               target:'http://192.168.0.72:8181/',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':'/'
                }
            },
          },
        before: app => { }
    },
    configureWebpack: config => {
        if (isProduction) {
            // 为生产环境
            if(process.env.npm_lifecycle_event === 'analyze'){
                config.plugins.push(
                    new BundleAnalyzerPlugin()
                );
            }
            config.plugins.push(
                new CompressionWebpackPlugin({
                  // 正在匹配需要压缩的文件后缀
                  test: /\.(js|css|svg|woff|ttf|json|html)$/,
                  // 大于10kb的会压缩
                  threshold: 10240
                })
              )
        } else {
            
        }
        //vue CDN
        config.externals = {
            'vue': 'Vue',
            'vue-router':'VueRouter',
            'vuex':'Vuex',
            'axios': "axios",
        }
    },

    // 第三方插件的选项
    pluginOptions: {
       
    }
}

vue的cdn配置,对应vue.conf.js 的CDN
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统</title>
    <meta name="renderer"  content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <script src="https://cdn.staticfile.org/vue/2.5.16/vue.js"></script>
   <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.js"></script>
    <script src="https://cdn.staticfile.org/vuex/3.0.1/vuex.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.js"></script> 

package.json

{
  "name": "treetask",
  "version": "0.1.0",
  "private": true,
  "author": "",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "analyze": "vue-cli-service build"
  },
  "dependencies": {
    "@riophae/vue-treeselect": "0.0.37",
    "element-ui": "2.9.2",
    "iview": "^3.1.0",
    "mavon-editor": "^2.5.4",
    "vue-cropper": "^0.4.9",
    "vue-cropperjs": "^2.2.0",
    "vue-neditor-wrap": "^1.0.4",
    "vue-simple-uploader": "^0.5.6",
    "vuedraggable": "^2.16.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.12.0",
    "compression-webpack-plugin": "^3.0.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "svg-sprite-loader": "3.5.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}