Skip to content
This repository has been archived by the owner on Dec 6, 2021. It is now read-only.

Upgrade guide from vbuild 5.2.0 to 6.x #108

Closed
layanto opened this issue Feb 14, 2017 · 5 comments
Closed

Upgrade guide from vbuild 5.2.0 to 6.x #108

layanto opened this issue Feb 14, 2017 · 5 comments

Comments

@layanto
Copy link

layanto commented Feb 14, 2017

Need upgrade guide to upgrade existing project from vbuild 5.2.0 to 6.x. Tried just updating vbuild in package.json to ^6.1.1 but error regarding missing index.js. Looked at the vue.config.js of 6.x and noticed that it is quite different to that of 5.2.0.
This is my 5.2.0 vue.config.js:

const webpack = require('webpack')

module.exports = {
    title: 'test-proj',
    template: './src/index.html',
    resolve: true,
    mergeConfig: {
        plugins: [
            new webpack.ProvidePlugin({
                jQuery: "jquery",
                $: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery"
            })
        ],
        performance: { hints: false }
    },
    vendor: ['jquery', 'vue', 'vue-router', 'vuex', 'vuex-router-sync', 'vee-validate']
}
@egoist
Copy link
Owner

egoist commented Feb 14, 2017

  • title and template are merged into html option, and this option accepts all options in html-webpack-plugin
  • resolve is gone, you can manually modify webpack config
  • mergeConfig changed to webpack
  • vendor keeps the same
const path = require('path')

module.exports = (options, req) => {
  const webpack = req('webpack')

  return {
    html: {
      title: 'test-proj',
      template: './src/index.html',
    },
    webpack: {
        // this is the `resolve: true` in vbuild 6
        resolve: {modules: [path.resolve('src')]},
        plugins: [
          new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            "window.jQuery": "jquery",
            "window.$": "jquery"
          })
        ]
    },
    vendor: ['jquery', 'vue', 'vue-router', 'vuex', 'vuex-router-sync', 'vee-validate']
  }
}

@throrin19
Copy link
Contributor

And how to set different config for production and development environment ?

@egoist
Copy link
Owner

egoist commented Feb 14, 2017

You can manually set this by using if (options.dev)

@egoist
Copy link
Owner

egoist commented Feb 14, 2017

something like:

const common = {}
const prodConfig = {}
const devConfig = {}

return Object.assign({}, common, options.dev ? devConfig : prodConfig)

@egoist
Copy link
Owner

egoist commented Feb 15, 2017

@throrin19 this feature is back in v6.6.0 https://github.com/egoist/vbuild#shorthand

@egoist egoist closed this as completed Feb 16, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants