使用 es6 import vue 时 Vue 模板不起作用答案

【问题标题】：Vue template not work while using es6 import vue使用 es6 import vue 时 Vue 模板不起作用
【发布时间】：2022-01-28 19:44:03
【问题描述】：

下面是我的重现步骤：

npm install vue@2.x.x
在我的 main.js 文件中写入以下代码

从 'vue' 导入 Vue new Vue({ 埃尔：'#app'，数据： { 味精：'你好，单词' } })
使用 webpack 构建它，然后它会在 dist 文件夹中构建一个文件
然后我写 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">
  <title>Document</title>
</head>
<body>
  <div>
    <div><span id="app">{{ msg }}</span></div>
  </div>
  <script src="./dist/main.js"></script>
</body>
</html>

然后我在chrome中打开index.html文件，但它不显示'hello，word'，我是一个新的初学者vue，我不知道它出了什么问题。提前致谢。

我还发现 vue 像上面 img 一样删除了我的 dom。

【问题讨论】：

这能回答你的问题吗？ "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6
您输入代码的 main.js 和索引文件中链接的那个是两个不同的文件。是这个问题吗？
好点，请确保您正在运行 vue 项目，很可能使用 npm start?
thnaks @Esszed 我不认为这是两个不同的文件。一是因为 dist 文件夹中的 main.js 是 webpack build 之一。另一个原因是当我在 chrom 中打开 index.html 时，即使此文本 '{{ msg }}' 也不显示任何内容

标签： javascript html vue.js

【解决方案1】：

起初，我以为是因为您没有正确运行项目，但后来我意识到您用红色箭头指向的注释表明 Webpack 服务器实际上正在运行。

您在这里遇到的问题似乎是，当您需要运行时 + 编译器构建来编译具有模板块或将模板块交换为渲染函数的 Vue 组件时，您正在使用 Vue 的仅运行时构建.

如果您不使用带有编译器的版本，但您的组件有模板块，那么它们将无法正确编译（尽管通常会显示错误提示）。

有关使用完整版本而非运行时版本的说明，请参阅here。

【讨论】：

真是太棒了！！！我真的很感激！非常感谢@Alex Scott