Vue-cli: How to build not minified files using @vue/cli

[brucejcw]

Version

3.9.3

Environment info

Environment Info:
node 10.
  System:
    OS: macOS 10.14.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: Not Found
    Safari: 12.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.9.2
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.9.0
    @vue/cli-plugin-babel: ^3.9.0 => 3.9.2
    @vue/cli-plugin-eslint: ^3.9.0 => 3.9.2
    @vue/cli-plugin-unit-mocha: ^3.9.0 => 3.9.0
    @vue/cli-service: ^3.9.0 => 3.9.3
    @vue/cli-shared-utils:  3.9.0
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vue2-touch-events: ^2.0.0 => 2.0.0
  npmGlobalPackages:
    @vue/cli: 3.9.3

Steps to reproduce

npm run build

What is expected?

js not be minified

What is actually happening?

js always minified

---

how can i modify optimization.minimizer to disable minify by default

[sodatea]

// vue.config.js
module.exports = {
  chainWebpack: config => config.optimization.minimize(false)
}

[luckymore]

@sodatea the inline script still be minified

var Appvue_type_template_id_7a951895_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"alt":"Vue logo","src":__webpack_require__("cf05")}}),_c('HelloWorld',{attrs:{"msg":"Welcome to Your Vue.js App"}})],1)}

[camslice]

And how about preventing minification of HTML?

[sodatea]

It's minified by the html-webpack-plugin so pass an option to it
https://www.npmjs.com/package/html-webpack-plugin

[camslice]

Ah thanks @sodatea , sort of works... but still minifies component HTML.

I added the following to vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].minify = false
        return args
      })
  }
}

The result is that everything outside of <div id="app"/> is not minified, but all the component HTML is still minified.

I'm using the prerender-spa-plugin as recommended here to prerender the app to static HTML files.

The default for the prerender is to not minify, but I also tried explicitly setting this to false but had no effect.