Migrate from Vue Cli 2 to 3

By | August 16, 2018
0 Comment

Vue Cli 3 is officially released so it’s a great time to upgrade because it brings a bunch of new features like plugin system, hiding the complexity of webpack and the very nice UI for the Cli. It make the Vue development experience even more fun.

I spent around 30 mins to migrate an complete application which including Vue router, vuex, authentication, authorization and so on. The migration experience is quite smooth and with no pain at all. Here are my steps (let’s assume my app is called myapp):

  1. Install the Vue Cli 3 with npm install -g @vue/cli
  2. Create a new project with vue create myapp-cli3
  3. Copy the content of src folder from old app to new app.
  4. Create aliases.config.js in the root folder, content (to enable the @ as src root):
const path = require('path')

function resolveSrc(_path) {
  return path.join(__dirname, _path)
}

const aliases = {
  '@': 'src',
  '@src': 'src'
}

module.exports = {
  webpack: {},
  jest: {}
}

for (const alias in aliases) {
  module.exports.webpack[alias] = resolveSrc(aliases[alias])
  module.exports.jest['^' + alias + '/(.*)$'] =
    '<rootDir>/' + aliases[alias] + '/$1'
}

5. Create vue.config.js in the root folder, content:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: require('./aliases.config').webpack
    }
  },
  css: {
    // Enable CSS source maps.
    sourceMap: true
  }
}

6. Create .env (and .env.production based on your environment) to enable configuration according target environment. Please be aware that you have to start the configuration key with VUE_APP_. For example:

VUE_APP_OAUTH2_ENDPOINT="http://localhost:60066/token"

And in the client code to use this configuration:

process.env.VUE_APP_OAUTH2_ENDPOINT

7. Try to npm run serve (if you still want to use npm run dev, you can add "dev":"vue-cli-service serve" in package.json file) to start myapp-cli3, fix errors you may encounter.

8. Delete all files in myapp and copy all files from myapp-cli3 to myappfolder and make a git commit. 🙂

Category: vue