使用本地vue.js开发时App.vue的template内容未在index.html显示

问题根因 #

• 浏览器原生不支持解析.vue后缀的单文件组件格式，这类文件需要经过vue-loader、vite等构建工具编译为标准JS代码才能被浏览器识别执行，当前代码直接在App.js中导入App.vue，浏览器无法解析该文件内容，导致JS执行中断，页面无法渲染。
• 若引入的本地vue.js为runtime-only版本，该版本不包含模板编译能力，即使解决了.vue文件解析问题也会存在渲染异常。
• 若直接通过file协议打开index.html文件，ES Module的导入规则会触发跨域限制，导致App.js无法正常加载执行。

解决方案 #

方案1：使用官方构建工具（推荐） #

直接用create-vue搭建标准Vue项目，内置完整的.vue文件编译、热更新、打包能力：

1. 终端执行项目创建命令：

npm create vue@latest

2. 按照提示完成项目初始化后，将现有App.vue的内容替换到生成的项目对应文件中，执行npm install && npm run dev即可正常运行项目。

方案2：无构建工具原生使用方案 #

如果不想使用构建工具，需要放弃.vue单文件写法，直接在HTML中编写Vue逻辑，修改后的index.html示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入带编译器的完整版vue.js -->
  <script src="res/vue.js"></script>
  <script src="res/vue-router.js"></script>
  <title>Vue</title>
</head>
<body>
  <div id="app" >
    {{foo}}
  </div>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#app',
      data: function(){
        return{
          foo:'Hello vue'
        }
      }
    })
  </script>
</body>
</html>

如果需要拆分组件，可以用Vue.component全局注册组件，组件模板可以写在<script type="text/x-template">标签中。
注意该方案必须通过本地静态服务访问HTML文件，不可直接用file协议打开，可使用VSCode的Live Server插件快速启动本地服务。

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