An article explains in detail how to differentiate the project according to the vue version

How to differentiate according to version? The following article will introduce to you the method of differentiation according to the vue version in the project. I hope it will be helpful to you!

Recently, when initializing and building a project, I encountered a console error problem, lib_exports.getCurrentInstance is not a function, and I am troubleshooting this problem. I learned some knowledge in the process: there are many versions of vue, such as 2.6.x, 2.7, 3.x. Different vue versions have usage differences, and different Different Vue versions will be used in the project. Assuming that a public tool needs to be provided to different projects, how can the tool be differentiated according to the Vue versions in different projects? You can first think about how to implement it, and then continue reading with questions in mind. [Related recommendations: vuejs video tutorial, web front-end development]

Initial troubleshooting

As can be seen from the error screenshot, the direct cause is the console error caused by calling the getCurrentInstance method in the useVModel method of vueuse. From the vueuse source code, you can see that vueuse imports the getCurrentInstance method from vue-demi.

Then look at the source code of vue-demi, as shown below, and I found something wrong. The vue version I use for this project is vue2. Why is isVue = true in the code? ? Moreover, getCurrentInstance is built-in only in vue2.7 and vue3. Before vue2.7, getCurrentInstance can only be used through @vue/composition-api.

vue-demi principle

##vue-demi is a simultaneous support A tool library for writing tools for vue2.x and vue3.x. Vueuse uses this library to smooth out some differences between vue2.6.x, vue2.7, and vue3.x.

Look at the

scripts section of package.json of vue-demi, you can see that it is configured with postinstall npm scriptHook, postinstallHook will be executed after you execute the pnpm install command.

##Let's see what

node_modules/vue-demi/scripts/postinstall.js

does. It will first try to load vue (require('vue')). Please note here that if you configure a vue alias in vite or webpack, such as { find: /^vue$/, replacement: '@xf/vue' },, it will not take effect on the script here. Yes, because the script is executed immediately after the dependencies are installed. The project has not been started at this time, and it has nothing to do with Vite. After trying to load vue, it determines the condition and executes the switchVersion method.

The main thing the switchVersion method does is copy different configuration contents based on the passed in version number parameters and replace them in the target file.

If it is vue2.5 or vue2.6, then it copies the following source code content:

If it is vue3, then it copies the following source code content:

vue-demi

The principle of implementing differentiated processing for different vue versions is in this way.

Root cause and solution

Go back to the console error problem in the project. This is because

vue-demi

cannot recognize the project vue in, because the project installed is @xf/vue after the vue source code was modified, and there is no pnpm add vue. If it is not recognized, vue-demi uses the default configuration (the default configuration is vue3 configuration). The vue we use when running the code is vue2.5.X. If you try

import { getCurrentInstance } from 'vue'

, you will definitely get an error. <p>The solution is <code>vue-demi provides a command to manually switch the vue version configuration. We configure the prepare npm script for the project: npx vue-demi-switch 2, configured After that, it will be executed every time you install project dependencies and manually switch to vue2 configuration.

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of An article explains in detail how to differentiate the project according to the vue version. For more information, please follow other related articles on the PHP Chinese website!