Home > Article > Web Front-end > 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]
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
.
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-demiThe principle of implementing differentiated processing for different vue versions is in this way.
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
, 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!