How to use CDN in vue cli?

Question

I am not familiar with packing frontend projects. When I was writing frontend, we just used JQuery. So the problem is now I have a project created by vue-cli and packed by webpack.

But as I don't want to load libraries from my local server but from remote CDN. How should I change the yarn add dependencies into CDN based form during yarn build? What is the correct way to do this kind of packing?

I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section. But that's difficult to manage.

Answer 1

1. update your public/index.html adding the vue script source for the cdn (preferably in the head)

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>

2. create a vue.config.js file in the project root with the following configuration. (if you already have the file, add configureWebpack block to it)

module.exports = {
  configureWebpack: {
    externals: {
      Vue: "vue"
    }
  }
};

this will flag the Vue dependency as a global, and not add it into the vendor bundle. You can do the same with other dependencies like element-ui, vuetify, vuex, etc...