VSCode Live Server运行Vue.js代码出现404及runtime.lastError报错求助

Hey Raphael, let's work through those errors you're encountering with your Vue.js setup in VS Code's Live Server!

First, let's break down exactly what's causing those console errors and how to fix them:

1. The source of the 404 (Not Found) error #

Looking at your code, there's a critical issue in the <head> section:

<script src="./vuejs"></script>

This line is trying to load a file named vuejs from your local project folder—but you don't have a file with that exact name (it's missing a .js extension at minimum) and you're already importing Vue via a CDN later in the code. Live Server can't locate this non-existent file, so it throws the 404 error you're seeing.

2. Step-by-step fixes for your code #

Here's what you need to adjust to resolve the errors and properly set up Vue:

• Delete the invalid script tag: Remove the <script src="./vuejs"></script> line entirely. You don't need this duplicate, broken import since you're already using the CDN version of Vue.
• Add a mount point for your Vue instance: Right now, you're creating a Vue instance with new Vue() but not telling it which part of the DOM to control. While this doesn't cause the 404, it will trigger a console warning. Add an element with an ID (like <div id="app">) and update your Vue instance to target it.

Here's your corrected code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Keep only the valid CDN import for Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- Add a mount point for Vue to attach to -->
    <div id="app">
        <p>teste</p>
    </div>
    <script>
        // Initialize Vue with the target element specified
        const vm = new Vue({
            el: '#app'
        });
        console.log(vm)
    </script>
</body>
</html>

3. Verify the fix #

After updating your code:

• Refresh the page in Live Server. The 404 error should disappear immediately, as we're no longer trying to load a non-existent file.
• Your Vue instance will now properly mount to the #app element, eliminating any extra console warnings about missing an el option.

内容的提问来源于stack exchange，提问作者Raphael