Vue 3本地运行时{{变量}}语法无法渲染数据值求助

架构老林

2026-7-13

问题：Vue本地部署后插值表达式不渲染，但DevTools显示数据正常

这段代码在在线Vue编辑器中运行完全正常，但本地部署后，浏览器无法渲染{{ inputWords }}的值。Vue DevTools能正常显示该数据，但页面上看不到对应内容，更换Chrome、Edge、Brave浏览器后问题依旧。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Sorting Words</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <h1>Sorting Words</h1>
        <div>
            <label for="words">Enter words (comma-separated):</label>
            <input type="text" id="words" v-model="inputWords">
        </div>
        {{ inputWords }}
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    inputWords: ''
                };
            }
        });

        app.mount('#app');
    </script>
</body>

</html>

可能的原因及解决方案

本地文件协议限制：直接用浏览器打开本地HTML文件时使用file://协议，部分CDN资源可能因浏览器安全策略无法正常加载，导致Vue模板编译异常。
解决：用本地服务器运行项目，比如安装Node.js后执行npx serve，或用Python3执行python -m http.server，通过http://localhost:端口号访问页面。
Vue资源加载不完整：本地网络环境可能导致Vue的CDN链接加载失败，虽然DevTools能识别Vue实例，但渲染逻辑未正常初始化。
解决：下载Vue 3的本地文件（从官方渠道获取），将CDN链接替换为本地路径，例如<script src="./vue.global.js"></script>。
浏览器插件干扰：部分广告拦截或隐私类插件可能误屏蔽Vue的渲染内容。
解决：暂时禁用浏览器插件，或在隐私/无痕模式下测试页面。