Migrate from Vue Cli 2 to 3

JIN Weijie
Aug 16, 2018 · 2 min read

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 myapp folder and make a git commit. :)

JIN Weijie

Maximizing Quality of Life, Being Earth Friendly.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store