ReferenceError: “Vue is not defined” Reasons and Solutions

1. Error description

When we try to use it in a project, the browser's developer tools console may throw the following error:

ReferenceError: Vue is not defined
    at <Your File>:<Line>:<Column>

This error indicates that the program is trying to access the Vue object, but the definition of Vue cannot be found in the current context.

2. Analysis of the causes of errors

Not correctly introduced
- When building tools such as Webpack or Vite are not used, Vue needs to pass<script>Tags are introduced directly. If the path is wrong or the file is lost, Vue will be undefined.
Incorrect introduction order
- In some cases, Vue's dependencies (such as third-party plug-ins) may be loaded before introduction, resulting in an error.
Not installed correctly
- For modern development methods, if they failnpm install vueInstall Vue, or project directorynode_modulesMissing Vue packages can also cause problems.
Vue version mismatch
- Using Vue2's code style but loading the Vue3 version, or vice versa, this can cause problems with the code being incompatible with the framework.
Packaging tool configuration issues
- Packaging tools (such as Webpack, Rollup) do not properly handle Vue-related module imports.

3. Solution

1. How to introduce inspection

For direct use<script>Tag method:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Vue Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- Correct introduction  --&gt;
    &lt;script src="/npm/[email protected]/dist/"&gt;&lt;/script&gt;
    &lt;script&gt;
        // Create Vue instance        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        });
    &lt;/script&gt;
    &lt;div &gt;{{ message }}&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Note: Make surescriptThe label path is correct and the network is smooth.

2. Verify npm installation

For projects using build tools, checkWhether it containsvue：

"dependencies": {
    "vue": "^2.6.14"
}

If it does not exist, you can run the following command to install:

npm install vue

3. Match Vue version and code style

Vue2 uses the Optional API:

import Vue from 'vue';
const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue2'
    }
});

Vue3 uses a combination API:

import { createApp } from 'vue';
const app = createApp({
    data() {
        return {
            message: 'Hello Vue3'
        };
    }
});
('#app');

4. Troubleshoot the configuration of the packaging tool

In the Webpack project:

Make sure you have Vue Loader and related plugins installed:

npm install vue-loader vue-template-compiler --save-dev

Modify the Webpack configuration file:

const { VueLoaderPlugin } = require('vue-loader');
 = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

5. Check the dependency loading order

If a third-party Vue plugin is used in the project, for examplevue-routerorvuex, be sure to introduce Vue first and then plug-in

import Vue from 'vue';
import VueRouter from 'vue-router';

(VueRouter);

6. Fix path or dependency issues

If the problem stems from a path error, try the following steps:

examinenode_modules/vueWhether it exists.
Reintroduce using an absolute path or the correct CDN address.

7. Testing and Verification

No matter which method is used, you need to refresh the page in the developer tool to confirm that the error disappears.

4. Preventive measures

Use a stable Vue CDN address
It is recommended to use trusted CDNs, such as jsdelivr.
Standardized project management
- In team development, use Vue2 or Vue3 explicitly to avoid version confusion.
- fixedVue version number in .
Familiar with Vue official documentation
- Vue official documentation is an important resource for getting started and solving problems quickly. By reading the documentation, many common mistakes can be avoided.

5. Summary

ReferenceError: "Vue is not defined"It is a common configuration error, but by explicitly introducing methods, standardized version management, and optimized packaging configuration, this problem can be easily solved and avoided.

The above is the use error: ReferenceError: The cause and solution of “Vue is not defined”. For more information about the causes and solutions of Vue is not defined, please pay attention to my other related articles!