不了解用 vue-cli 创建的 Vue 项目的项目结构答案

【问题标题】：Don't understand project structure of Vue project created with vue-cli不了解用 vue-cli 创建的 Vue 项目的项目结构
【发布时间】：2019-12-27 22:51:32
【问题描述】：

我是 Vue.js 的新手，之前从未使用过前端框架。

我使用“vue create”命令创建了一个项目，其中包含常用插件和所有内容（没有改变游戏规则），一切正常。我想从 0 开始，所以我删除了除了 public 目录中的 index.html 文件、src 目录中的 main.js 文件和配置文件（见下文）之外的所有内容。

现在，当我加载页面时，您可以在瞬间看到“Test”和“{{message}}”，然后它就消失了，页面完全空白。

所以我的问题是，main.js 文件是如何连接到 index.html 文件的。我从 webpack 知道你需要一个入口点并从那里链接所有内容，但我在这里找不到这样的东西，因为 main.js 不包含 index.html。那么为什么我的代码没有按预期工作呢？我想让它说 Hello World。

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.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>Vue Getting Started</title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but vue_getting_started doesn't work properly without
        JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app">
      <h1>Test</h1>
      <h1>{{ message }}</h1>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

【问题讨论】：

Vue CLI 使用 Webpack，因此如果您想像 Vue CLI 一样从头开始创建自己的项目，则需要研究如何使用 Webpack 进行设置。

标签： javascript html vue.js vue-cli

【解决方案1】：

你看到线的地方

<!-- built files will be auto injected -->

是 webpack 将在其中注入一个加载捆绑 javascript 的脚本标签的地方，你应该能够在使用 devtools 时看到这一点。这是你的主要入口块被加载的地方。但是，只有在 webpack 实际通过运行开发服务器或通过创建生产包来完成其工作时才会发生这种情况。

如果“当我加载页面时”是指在浏览器中打开 index.html 文件，这不会有太大作用。您需要运行 webpack，在较新版本的 vue cli 中，您可以通过导航到根文件夹并运行 vue-cli-service serve

来实现

【讨论】：

感谢您的回答，是的，当我使用开发服务器时，webpack 会将所有内容捆绑到 index.html 中，但不是在 {{message}} 部分中填写“Hello World”，一切都消失了。
我还在 chrome 控制台中收到一条错误消息：[Vue 警告]：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译成渲染函数，要么使用编译器包含的构建。
您应该能够在根文件夹的vue.config.js 文件中将运行时编译器设置为true。 cli.vuejs.org/config/#runtimecompiler 通过在导出的对象中添加 runtimeCompiler: true。看看这是否能解决您的问题。